vue2父子传值的方式(refs,props,$emit自定义事件,bus事件总线)

方式一：refs（父传子）

1. 原理：父组件通过 ref属性给子组件取了一个名字 childRef，然后可以通过 this.$refs.childRef来访问子组件的所有属性和方法来修改值

2. 实现：

父组件

//父组件
<template>
    <div>
        <span>我是父组件</span>
        <Child ref="childRef"></Child>
        <button @click="passDataToChild">点我向子组件传值</button>
    </div>
</template>
<script>
import Child from './components/Child.vue';
   export default{
        name:'App',
        components:{
            Child,
        },
        methods:{
            passDataToChild(){
                const data = 'Data from parent';
                this.$refs.childRef.msg=data;
            }
        }

    }
</script>

子组件

<template>
    <div class="child">
        <p>我是子组件</p>
        <p>收到父组件的数据：{{msg}}</p>
    </div>
</template>
<script>

    export default {
        name:'Child',
        data(){
            return{
                msg:'',
            }
        },
        methods:{
            aaa(){

            }
        }

        
    }
</script>
<style>
 .child{
    background-color: pink;
 }
</style>

方式二：props（父传子）

1. 原理：父组件通过在子组件的标签上绑定属性，将数据传递给子组件。子组件可以通过声明 props 来接收这些数据，并在其内部使用。

2. 实现：

父组件

<template>
    <div>
        <span>我是父组件</span>
        <Child :msg="fatherMsg"></Child>
        <!-- msg为绑定的属性，fatherMsg为父组件传的值 -->
    </div>
</template>
<script>
import Child from './components/Child.vue'
   export default{
        name:'App',
        components:{
            Child,
        },
        data() {
            return {
                fatherMsg:'Data from parent'
            }
        },
    }
</script>

子组件

<template>
    <div class="child">
        <p>我是子组件</p>
        <p>收到父组件的数据：{{ msg }}</p>
    </div>
</template>
<script>
   export default{
        name:'Child',
        props:["msg"],
    }
</script>
    
<style>
.child{
    background-color: pink;
}
</style>

方式三：$emit自定义事件（子传父）

1. 原理：子组件使用 $emit方法发送自定义事件给父组件，并且传递要发送给父组件的数据。父组件通过在子组件的标签上监听自定义事件来响应子组件发送的消息。

2. 实现：

父组件

<template>
    <div>
        <span>我是父组件</span>
        <p>收到子组件的数据：{{ msgFromChild }}</p>
        <Child @msg="getData"></Child>
        <!-- 父组件在子组件的标签上通过 @msg监听了这个自定义事件，
        并且定义了一个名为getData的方法来处理子组件发送过来的消息 -->
    </div>
</template>
<script>
import Child from './components/Child.vue'
   export default{
        name:'App',
        components:{
            Child,
        },
        data() {
            return {
                msgFromChild:''
            }
        },
        methods: {
            getData(value){
                this.msgFromChild=value;
            }
        },
    }
</script>

子组件

<template>
    <div class="child">
        <p>我是子组件</p>
        <button @click="passDataToFather">点我向父组件传值</button>
    </div>
</template>
<script>
   export default{
        name:'Child',
        methods: {
            passDataToFather(){
                this.$emit('msg', '我是子组件传给父组件的数据');
                // 子组件使用 $emit发送了一个自定义事件'msg'给父组件
                // 并且传递了数据 '我是子组件传给父组件的数据'
            }
        },
    }
</script>
    
<style>
.child{
    background-color: pink;
}
</style>

方式四：bus事件总线（父子之间相互通信）

1. 原理：需要发送消息的组件通过emit广播消息，需要接收消息的组件通过on获取消息

2. 实现：

bus.js

// bus.js
import Vue from 'vue';

const bus = new Vue();
export default bus;

父组件

<template>
    <div>
        <span>我是父组件</span>
        <p>收到子组件的数据：{{ msgFromChild }}</p>
        <Child></Child>
    </div>
</template>
<script>
import bus from './bus';
import Child from './components/Child.vue'
   export default{
        name:'App',
        components:{
            Child,
        },
        data() {
            return {
                msgFromChild:''
            }
        },
        mounted() {
            bus.$on('msg', (data)=>{
                this.msgFromChild=data;
            });
        },
    }
</script>

子组件

<template>
    <div class="child">
        <p>我是子组件</p>
        <button @click="sendMessage">点我向父组件传值</button>
    </div>
</template>
<script>
import bus from '../bus'
   export default{
        name:'Child',
        methods: {
            sendMessage(){
                bus.$emit('msg', '我是子组件传给父组件的数据');
            }
        },
    }
</script>
    
<style>
.child{
    background-color: pink;
}
</style>