一、父传子
给子组件设置自定义属性,子组件通过props接收
父组件:
<template>
<div>
<p>我是父组件1</p>
<child1 :tit='msg'></child1>
</div>
</template>
<script>
import child1 from '../components/child1.vue'
export default {
data(){
return {
msg:'我是父组件的数据'
}
},
components:{
child1
}
}
</script>
子组件:
<template>
<div>
<p>我是子组件</p>
<p>接受父组件传过来的值---{{ tit }}</p>
<p>{{ msg1 }}</p>
<button @click="changeMsg">点击修改msg</button>
</div>
</template>
<script>
export default {
data() {
return {
msg1: "我是子组件数据",
};
},
props: ["tit"],
methods: {
changeMsg() {
this.msg1 = this.tit;
},
},
};
</script>
二、子传父
1、子组件触发自定义事件,父组件绑定子组件定义的自定义事件名,监听子组件的事件,实现通信
子组件:
<template>
<div @click="transform">我是子组件</div>
</template>
<script>
export default {
data(){
return {
msg:'我是子组件的数据'
}
},
methods:{
transform(){
this.$emit('transMsg',this.msg)
}
}
}
</script>
父组件:
<template>
<div>
<p>我是父组件</p>
<child2 @transMsg='changeMsg'></child2>
<p>{{msg}}</p>
</div>
</template>
<script>
import child2 from '../components/child2.vue'
export default {
data(){
return {
msg:'没数据'
}
},
components:{
child2
},
methods:{
changeMsg(val){
this.msg=val
}
}
}
</script>
2、ref方式:ref属性绑定到组件标签上,可以获取到子组件上的所有属性和方法
三、嵌套传值(爷孙传值)
使用provide和inject,只要在上一层声明的provide,那么下一层无论多深都能通过inject访问到provide的数据
爷爷组件:
<template>
<Son></Son>
</template>
<script>
import Son from "./Son.vue";
export default {
components: {
Son,
},
data() {
return {
msg: 666,
};
},
provide() {
return {
fatherMsg: this.msg,
fatherMether: this.say,
};
},
methods: {
say() {
alert("你好!");
},
},
};
</script>
子组件:
<template>
<GrandSon></GrandSon>
</template>
<script>
import GrandSon from './GrandSon.vue'
export default {
components: {
GrandSon,
}
}
</script>
孙子组件:
<template>
<div>
<p>{{ fatherMsg }}</p>
<button @click="fatherMether()">你好</button>
</div>
</template>
<script>
export default {
inject: ["fatherMsg", "fatherMether"],
};
</script>
四、兄弟组件传值
通过中央事件总线
// assets文件夹下eventBus.js文件
import Vue from 'vue'
export default new Vue()
兄弟组件1:
<template>
<div>
<p>我是兄弟1</p>
<button @click="transCom">传给兄弟</button>
</div>
</template>
<script>
import eventBus from '../assets/eventBus'
export default {
data(){
return {
data:'给兄弟2的数据'
}
},
methods:{
transCom(){
eventBus.$emit('trans',this.data)
}
}
}
</script>
兄弟组件2:
<template>
<div>
<p>我是兄弟2</p>
<p>{{data}}</p>
</div>
</template>
<script>
import eventBus from '../assets/eventBus'
export default {
data(){
return {
data:''
}
},
mounted(){
eventBus.$on('trans',(val)=>{
this.data=val
})
}
}
</script>