父传子：使用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），直接传递。
兄弟间互传：事件总线