Vue组件之间的数据交互总结Vue插槽Vue事件总线Vuex

1. props传递数据[父级传子级]

props 接收父级传过来的数据props是单向数据流，只能父级传子级

// Parent.vue 
// 在父组件中引入子组件，将数据以v-bind指令动态传递过去
<template>
    <Child :message="message" :age="age" :list="list"/>
</template>

<script>
import Child from './Child.vue' 

export default {
   
    data(){
   
        return{
   
            message:"要传递的数据",
            age:10,
            list:["11","22","33"]
        }
    },
    components:{
   
        Child
    }
}
</script>

// 子组件中用props来接收父组件传递过来的数据
// Child.vue -- 引入到父级中
export default {
   
    name:"Child",
   // props:["message","age","list"]
   // props中可以指定接收数据类型和设置默认值
    props:{
   
        message:{
   
            type: [String,Number], // String 或 Number类型
            default:""
        },
        age:{
   
            type: Number,
            default:0,
            required:true // 必填项
        },
        list:{
   
            type:Array,
            default:()=>{
   
            	// 数组的默认值为[]
                return [];
            }
        }
    }
}

2. 自定义事件[子级传父级]

方法一$emit("自定义事件",数据) 发送数据给父级，父级中要实现 自定义事件

// Child1.vue
<button @click="clickHandle">按钮</button>

<script>
export default {
   
    data(){
   
        return{
   
            message:"要传给父级的数据"
        }
    },
    methods:{
   
        clickHandle(){
   
            // this.message是要发送给父级的数据
            // onSend是父级要实现的事件名
            // $emit()向父级递交数据
            this.$emit("onSend",this.message)
        }
    }
}
</script>

// Parent1.vue
<template>
    <!-- 实现子集中传过来的事件 onSend -->
   <Child1 @onSend = "receiveHandle"/>
</template>

<script>
import Child1 from './Child1.vue'
export default {
   
    methods:{
   
        receiveHandle(data){
   
            // data就是子集传过来的参数 this.message
            // 可以将data赋值给其他值来进行显示
            console.log(data);
        }
    },
    components:{
   
        Child1
    }
}
</script>

方法二
$emit("自定义事件",数据) 发送数据给父级，父级中通过ref读到子组件并且实现 自定义事件
ref这种写法，优势在于可以处理一些异步操作，比如在外层包裹定时器setTimeOut等

// Child.vue
<button @click="sendMsg">发送数据</button>

export default {
   
    data(){
   
        return{
   
            msg:"我是子级的数据"
        }
    },
    methods:{
   
        sendMsg(){
   
            // $emit(自定义事件，要发送的数据)发送数据
            this.$emit("sendHandle",this.msg)
        }
    }
}

// Parent.vue
<Child ref="child"/>
export default {
   
 	methods:{
   
        // msg是子级传递过来的数据
        callback(msg){
   
            console.log(msg);
        }
    },
    
    mounted(){
   
    	// 父级接收数据 $on（自定义事件, 回调函数）
        this.$refs.child.$on("sendHandle",this.callback);
    }
}

补充：如果事件只需要触发一次，可以这样设置