六、组件间传值
1.父子组件传值
(1) 父传子
父组件向子组件传值，可以通过绑定属性传值；子组件通过props接收父组件传值。
父组件：
<div class="animal">
<h2>动物</h2>
<div>名称：{{name1}}</div>
<div>年龄：{{age1}}</div>
<!-- 通过给组件绑属性，通过属性把这两个值传过去 -->
<!-- 向子组件传值，可以通过props，子组件里要props接 -->
<Bird :name="name1" :age="age1"></Bird>
</div>
<script>
import Bird from './Bird.vue'
export default {
name: "Animal",
data() {
return {
name1:'大雁',
age1:20,
}
},
components:{
Bird
},
};
</script>
父组件中定义的数据，使用绑定属性的方法，给子组件标签绑定属性，
然后在子组件页面中使用props和插值表达式来接收数据。
（props中的数据不能修改，需要中转）
在子组件中想要修改父组件传过来的值，此时如果自定义一个update函数，只能修改当前页面的数据，
此时，就需要使用$emit来触发一个自定义事件，格式如下，
此处引号中的updateData是自定义事件的名称，
其次将当前页面中转props数据的myName和myAge分别定义为n和a。
注意格式，里面是一个对象。
子组件：
接收父组件传值props:['name','age']。子传父，触发一个自定义事件this.$emit('updateName',this.myName)。
<div class="bird">
<h2>鸟类</h2>
<div>名称：{{ myName }}</div>
<div>年龄：{{ myAge }}</div>
<button @click="updateData">修改信息</button>
</div>
<script>
export default {
name: "Bird",
props: ["name", "age"],
data() {
return {
myName: this.name,
myAge: this.age,
};
},
methods: {
updateData() {
this.myName = "仙鹤";
this.myAge = 10;
// 向父组件传值，可以通过$emit触发自定义事件
this.$emit("updateData", {n: this.myName,a: this.myAge});
},
},
};
</script>
注意：props里面的数据是不能修改的。
=>>> 也就是不能直接在methods写方法，
methods:{ updateData(){ this.name = '仙鹤' this.age = 10 } }
Σ( ° △ °|||)︴达咩
然后
在父页面中的子页面标签中添加@updateData="updateData"，
前面的updateData是子页面中自定义事件的名称，
后面的updateData是给当前页面定义的一个函数的名称，
然后然后
在methods中定义该方法，此处的e就是子页面传给父页面的数据，最后修改当前页面的数据即可。
<div class="animal">
<h2>动物</h2>
<div>名称：{{name1}}</div>
<div>年龄：{{age1}}</div>
<Bird :name="name1" :age="age1" @updateData="updateData"></Bird>
</div>
<script>
import Bird from './Bird.vue'
export default {
name: "Animal",
data() {
return {
name1:'大雁',
age1:20
}
},
components:{
Bird
},
methods: {
updateData(e){
this.name1 = e.n
this.age1 = e.a
}
},
};
</script>
2.祖孙组件传值
首先祖先给子孙后代传值也是可以用props传递，一层层传递，如果嵌套了五六层，这种方法就显得很繁琐。
所以就用到了provide(提供)和inject(注入)。
这两个是配套使用的，以允许祖先向所有祖先后代注入一个依赖。
祖先组件通过provide添加依赖数据，它里面定义的数据，后代组件可以通过inject选择性注入并直接使用。
注意：后代组件通过inject注入祖级组件中的依赖数据，跟props一样，接收的数据是只读的，不能修改。
祖先组件：
<div class="animal">
<div>名称：{{ name2 }}</div>
<div>年龄：{{ age2 }}</div>
<Bird :name="name1" :age="age1" ></Bird>
</div>
data() {
return {
name2: "小明",
age2: 5
};
}
// 添加依赖数据，它里面定义的数据，子组件可以选择性注入并直接使用。
provide() {
return {
doveName: this.name2,
doveAge: this.age2,
// 将修改name2和age2的方法，设置为依赖数据
updateDove: this.updateDove,
};
},
methods: {
updateDove(dove) {
this.name2 = dove.name;
this.age2 = dove.age;
},
}
后代组件：
<div class="dove">
<h2>鸽子</h2>
<div>名称：{{ mydoveName }}</div>
<div>年龄：{{ mydoveAge }}</div>
<button @click="updateData">修改数据</button>
</div>
// 从父级组件中注入依赖的数据
inject: ["doveName", "doveAge", "updateDove"],
data() {
return {
mydoveName: this.doveName,
mydoveAge: this.doveAge,
};
},
methods: {
updateData() {
this.mydoveName = "小红";
this.mydoveAge = 8;
// 执行父级组件中的updateDove方法
this.updateDove({ name: this.mydoveName,age: this.mydoveAge, });
}
}
3.兄弟组件传值
在Vue是原型对象上，添加一个$bus属性，该属性的的属性值是一个Vue实例。
将Vue的所有实例，都将共用同一个$bus。
这个$bus属性，我们称之为：中央事件总线。
在vue的入口文件main.js中添加该属性，
Vue.prototype.$bus = new Vue()
在两个兄弟组件中分别写入，
methods: {
// 修改乌鸦信息的方法
updateCrow(){
this.$bus.$emit('updateCrow',{name:'小王',age:30})
}
},
mounted() {
// 监听updateCrow事件，当该事件触发时，会执行对应的回调函数
this.$bus.$on('updateCrow',(e)=>{
this.name=e.name
this.age=e.age
})
},
4.全局状态管理
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
(1) 安装： npm install vuex --save
(2) 在入口文件main.js中导入并使用
(3) 创建全局状态管理对象vuex
(4) 注册
// 导入vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)
// 创建全局状态管理对象
const store = new Vuex.Store({
// ...
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
我们一般在src资源文件夹中单独创建一个store文件夹，
然后在该文件夹中创建index.js，
然后将上述内容全部迁移至该文件中，
此处需要单独引入vue，并且在创建全局状态管理对象时直接导出
// 导入vue
import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)
// 创建全局状态管理对象
export default new Vuex.Store({
})
最后在入口文件main.js中引导入store
import store from './store'
网友评论