vue项目中,组件都具有复用性,那么复用组件中的data也会有所不同,这时就需要组件之间来传递参数;
1.父传子
父组件中先引入并注册子组件,再通过v-bind(简写为“:”)绑定需要传递给子组件的数据
<Son :parent="parent_data" />
import Son from "@/components/son";
export default {
components: { Son },
data() {
return {
parent_data: "这是父组件的数据",
};
},
};
子组件通过props做接收,之后就可以在视图中使用了
props: ["parent"],
如果接收的数据需要指定类型,写成对象的形式就可以了,其中required表示是否必传,type表示数据类型,default表示默认值
props: {
parent: {
required: false,
type: String,
default: "默认值",
},
},
这时,如果父组件传递引用类型,子组件中把数据修改了,那么父组件对于的值也相应修改了,这和js的数据存储有关系,解决方法是修改前做一次深拷贝;可以参考:
2.子传父
子组件通过$emit触发父组件中的自定义事件来传递数据
data() {
return {
son_data: "这是子组件数据",
};
},
methods: {
change() {
this.$emit('son',this.son_data);
},
},
父组件自定义事件触发的函数中参数就是子组件传递过来的值,
<Son @son="receive" />
methods: {
receive(value) {
console.log(value);//打印接收到子组件的值
},
},
3.vuex状态机
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
4.原型链
在main.js里面vue原型上挂一个对象,用来存需要传递的数据
Vue.prototype.$bus = {};
在页面中就可以进行读写了
this.$bus.parent="父组件数据";
let parent_data=this.$bus.parent;