父传子:使用props
//子组件内容
<template>
<div id="app">
<div>姓名:{{ name }}</div>
<div>年龄:{{ age }}</div>
</div>
</template>
<script>
export default {
props: ["name", "age"],
};
</script>
父组件
<template>
<son1 :name="newname" :age="newage" @son1data="getdata"></son1>
</template>
<script>
export default {
data(){
return {
newname:'李雷',
newage:15
}
}
}
</script>
原理就是通过props设置,绑定父级组件上的两个属性作为子组件的属性进行使用。
//子组件
data(){
return {
myname:this.name
}
}
子传父:使用$emit
//子组件
<template>
<div id="app">
<div>姓名:{{ name }}</div>
<div>年龄:{{ age }}</div>
<div>姓名1:{{ myname }}</div>
<div>年龄1:{{ myage }}</div>
<button @click="son1emit">点击发送数据</button>
</div>
</template>
export default {
data() {
return {
myname: "李四",
myage: 23,
};
},
props: ["name", "age"],
methods: {
son1emit() {
this.$emit("son1data", { name: this.myname, age: this.myage });
},
},
};
</script>
//父组件
//模板
<son1 :name="newname" :age="newage" @son1data="getdata"></son1>
//方法
methods: {
getdata(val) {
this.son1_name = val.name;
this.son1_age = val.age;
}
},
//属性
data() {
return {
newname: "张三",
newage: 22,
son1_name: "",
son1_age: "",
};
},
该方法原理是通过子组件的$emit,将第二个参数的值传出去,再由父组件的$on事件进行监听,从而获取相关数据。
另外可用的方法还有vc身上的$children,$parent属性,点击一下。
祖传孙(中间层断开):使用provide==>inject
//provide选项可以定义数据给其他后代组件使用
provide() {
return {
address: this.address,
};
},
data() {
return {
address: "南京雨花台",
};
},
上面是祖组件的导出内容,下面是孙组件的内容
<template>
<div>
<p>地址:{{ myaddress }}</p>
</div>
</template>
<script>
export default {
data() {
return {
myaddress: this.address,
};
},
//通过注入的方式拿到主组件的数据
inject: ["address"],
};
</script>
兄弟组件之间的传值:
事件总线:可以创建一个Vue实例作为事件中心,用于兄弟组件之间的通信。在兄弟组件中,通过$emit触发自定义事件,然后在事件总线上监听该事件,在另一个兄弟组件中通过$on接收传递的值
// main.js 文件
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
beforeCreate() {
// 需要在全局添加一个属性
Vue.prototype.$bus = this
}
}).$mount('#app')
// Father.vue 文件
<template>
<div id="father">
<button @click="btn">我要给 Brother 组件传数据</button>
</div>
</template>
<script>
export default {
name: "Father",
methods: {
btn() {
this.$bus.$emit("change", 66666);
},
},
};
</script>
// Brother.vue 文件
<template>
<div id="brother"></div>
</template>
<script>
export default {
name: "Brother",
mounted() {
this.$bus.$on("change", (msg) => {
console.log(msg);
});
},
};
</script>
组件间传值:
父传子:props,
子传父:$emit ,
祖传孙:provide==>inject,
孙传祖:$parent,或者provide里传递一个方法(function),直接传递。
兄弟间互传:事件总线