введение
Две основные особенности vue:
响应式原理а также组件系统, сегодня мы рассмотрим组件系统Во всех уровнях компонентов есть способы передачи данных.
Последующие демонстрации выполняются в сети отношений, как показано ниже:
FatherдляSonа такжеDaughterДля родительского компонента.SonдляFatherдля дочерних компонентов, но дляGrandSonBySonа такжеGrandDaughterBySonявляется родительским компонентом.DaughterдляFatherдля дочерних компонентов, но дляGrandSonByDauявляется родительским компонентом.
в то же время,Daughterа такжеSonиметь один и тот же родительский компонентFatherСледовательно, эти два компонента являются родственными компонентами друг друга.
1. Используйте prop (от отца к сыну) и $emit (от ребенка к отцу)
Родительский компонент передает значение дочернему компоненту через sonValue и dauValue реквизита, предоставляемого дочерним компонентом.
//父组件
<template>
<div class="father">
<son v-bind:sonValue="son"></son>
<daughter v-bind:dauValue="daughter"></daughter>
</div>
</template>
<script>
import Daughter from '@/views/Daughter.vue'
import Son from '@/views/Son.vue'
export default {
components: {
Daughter,
Son
},
data () {
return {
son:'son',
daughter:'daughter'
}
}
}
</script>
Дочерний компонент получает значение родительского компонента через внутренне определенные реквизиты. Всякий раз, когда значение родительского компонента изменяется, значение внутри дочернего компонента будет меняться. Вы можете использоватьthis.[props]Цитировать.
// 子组件
<template>
<div class="father">
{{sonValue}} <!-- son -->
</div>
</template>
<script>
export default {
props:{
sonValue:{
type:String,
default:""
}
},
data () {
return {
}
},
mounted(){
console.log(this.sonValue) // 父组件输入的值'son'
}
}
</script>
Передача значений из дочерних компонентов в родительские на самом деле触发事件Затем верните его родительскому компоненту через параметр события.
// 子组件中触发
this.$emit('事件名','值')
// 父组件中将事件绑定回父实例的函数上，第一个参数为子组件的传值。
<son v-bind:sonValue="son" @changeFather="change"></son>
methods:{
change(value){
//value是子组件的传过来的值
this.fromSon = value
}
}
Примечание. Причина одностороннего потока данных Vue. Все реквизиты формируют отношения между их родительскими и дочерними реквизитами.Односторонняя привязка нисходящего каналаРодитель реквизита будет стекать вниз для обновления подсборки, но не наоборот. Это предотвратит изменения из неожиданного состояния подсборок родительского компонента, что приведет к тому, что поток данных вашего приложения будет трудно понять. Кроме того, каждый раз, когда родительские компоненты обновляются, подсборки — это вся опора, которая будет обновляться до последнего значения. Это означает, что вы не должны менять пропеллер внутри подсборки. Если вы сделаете это, Vue выдаст предупреждение в консоли браузера.
// 子组件son的修改
data () {
return {
//初始化一个子组件内部的值，将传入的值赋值。
realSonValue:this.sonValue
}
},
два,vm.$ref.[child]а такжеvm.$parent(вызов отображения между родительским и дочерним компонентами)
vm.$ref.[child]Вставьте дочерний компонент в родительский компонент и установите значение ссылки дочернего компонента.ref="son"
// 父组件
<template>
<div class="father">
<son v-bind:sonValue="son" @changeFather="change" ref="son"></son>
{{fromSon}}
<daughter v-bind:dauValue="daughter"></daughter>
</div>
</template>
// 父组件都可以通过引用'ref'的方式来获得。
mounted(){
console.log(this.$refs.son.innerValue) // '$refs.son'
this.$refs.son.innerFun() // 'I am Son'
}
Значение или метод, определенный внутри дочернего компонента.
data () {
return {
// 初始化一个子组件
innerValue:'$refs.son'
}
},
methods:{
innerFun(){
console.log('I am Son')
}
},
vm.$parentВставьте экземпляр родительского компонента в дочерний компонент
// 父组件
data () {
return {
innerFather:'vm.$parent'
}
},
// 子组件
mounted(){
console.log(this.$parent.innerFather) // ·'vm.$parent'
}
Примечание. Некоторые друзья обнаружат, что проблема в том, что, поскольку
vm.$parentЭто должно былоvm.$childrenРезультат действительно есть, но в вм вы обнаружите, что у родительского компонента может быть много дочерних компонентов, то есть естьvm.$childrenИспользуя это для вывода массива классов подкомпонентов, невозможно найти значение нужного подкомпонента, но каждый подкомпонент имеет только один фиксированный родительский компонент.
3. Шинный механизм шины (между родственными компонентами)
пройти черезvm.$emitа такжеvm.$onпройти черезvm.$emitИнициировать событие в текущем экземпляре и передать параметры слушателю черезvm.$onСлушайте пользовательские события в текущем экземпляре.
Это просто понимается как платформа хостинга.Эта платформа должна быть независимой от экземпляра vue за пределами связанных двух компонентов.Когда двум компонентам необходимо передать данные, инициатор запускает
vm.$emitЗатем передайте параметры, и получатель установит прослушиватель на платформе.vm.$onПолучить параметры и выполнить метод.Параметры метода — это параметры, переданные отправителем.
Сначала определите платформу хостинга.В проекте vue вы можете внедрить ее в каждый родственный компонент в виде одного файла или сгенерировать экземпляр vue, как я, и повесить его под весь экземпляр Vue.
var bus = new Vue()
Vue.prototype.bus = bus
// 发送方兄弟组件触发$emit设置名字以及传递参数
mounted(){
this.bus.$emit('SonByDauChange','I am grandSonByDau')
}
// 接收方兄弟组件监听事件，并执行回调
methods:{
brotherData(value){
console.log(value) // 'I am grandSonByDau'
}
},
mounted(){
this.bus.$on('SonByDauChange',this.brotherData)
}
Четыре,vm.$attrsа такжеvm.$listeners
Усовершенствованная версия передачи значения компонента родитель-потомок для реквизита и излучения. Его можно передать от родительского компонента к дочернему компоненту, а промежуточный дочерний компонент используется как
vm.$attrsа такжеvm.$listenersвектор реализации
vm.$attrsСохраняет свойства, не отмеченные реквизитами дочернего компонента, которые можно понимать как данные, привязанные родительским компонентом к самому дочернему компоненту.
// 父组件引入son子组件
<div>这是父组件</div>
<Son :myData="value" :grandSon="grandSon" @changeGrandSon="changeGrandSon"></Son>
data () {
return {
myData:'from props',
grandSon:'from father'
};
},
methods: {
changeGrandSon(value){
console.log(value) // from grandSon
}
},
// 子组件，能在父组件中被引用的是myData的值，但是我们能通过vm.$attr对象获得props之外的属性
<div>这是子组件</div>
<grandSon v-bind="$attrs" v-on="$listeners"></grandSon> // 划重点可以将父组件给予子组件prop的额外的值传递给孙组件
props:{
myData:{
type:String,
default:''
}
mounted() {
console.log(this.$attrs.granSon) //可以获得from father
},
// 孙组件,不需要props可以直接获得从父组件传递过来的值
<div>这是孙组件</div>
<div>{{$attrs.grandSon}}</div> // from father
mounted() {
console.log(this.$attrs)
this.$emit('changeGrandSon','from grandSon') // 触发父组件的changeGrandSon的事件
},
Суммировать:vm.$attrsа такжеvm.$listenersМожно передавать значения и события между уровнями (выше и ниже по течению, а не одноуровневыми компонентами) от родительского компонента, но компоненты (дочерние компоненты) в середине должны бытьv-bind="$attrs" v-on="$listeners"Для привязки передачи по значению.
Пять, обеспечить/ввести
Эту пару опций необходимо использовать вместе, чтобы позволить компоненту-предку внедрить зависимость во все его потомки, независимо от того, насколько глубока иерархия компонентов, и она всегда будет действовать, пока устанавливаются отношения восходящего и нисходящего потоков. Только данные передаются вниз, а ответ на событие не поднимается. Его можно передавать вниз и по уровням, а детям и внукам можно вводить до тех пор, пока они есть.
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子、孙组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
Шестое: используйте vuex и localStorage.
Достойное взаимодействие компонентов осуществляется за счет использования хранилищ данных. Рекомендуется использовать vuex для управления передачей значений между различными компонентами в крупных проектах. Ассоциация нескольких компонентов может быть сгенерирована вокруг управления состоянием vuex. Для получения подробной информации об использовании vuex вы можете проверить официальную документацию.
7. Конец
Просто выдвигайте идеи, посередине может быть больше практических операций, нужно самому пробовать, совмещая с документацией по апи.