vue父子组件的传值

一.父组件向子组件传值

1.在子组件中创建一个props属性，用于接收父组件传来的值。
2.在父组件中注册子组件，并在template中加入子组件标签，在子组件标签中添加props属性。
3.把需要传的值赋值给该属性。

// 先定义一个子组件，在组件中注册props
<template>
    <div>
        <div>{{message}}(子组件)</div>
    </div>
</template>
<script>
export default {
//可以使用required选项来声明这个参数是否必须传入。
//	props: {
//        message: {
//             type: Number,
//             required: true
//         }
//     },
    props: {
    	//可以使用type来声明这个参数可以接受的数据的类型，当检查规则只有一个的时候type可以略写
    	//type可以是以下原生类型：String,Number,Boolean,Function,Object,Array,Symbol
        message: String  //props验证(message为String)
	}
//	props: ["messages"],
</script>

// 在父组件中，引入子组件，并传入子组件内需要的值
<template>
    <div>
        <div>父组件</div>
        //动态传值
        <child :message="parentMsg"></child>  
        //静态传值
        //<child message="静态值"></child>  
    </div>
</template> 
<script>
 
import child from './child'  //引入child组件
export default {
    data() {
            return {
                parentMsg: 'a message from parent'  //在data中定义需要传入的值
            }
        },
        components: {
            child
        }
}
</script>

props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件修改父组件的状态。所以不应该在子组件中修改 props 中的值，

二.子组件向父组件传值

1.子组件需要以某种方式例如点击事件的方法来触发一个自定义事件。

<button @click='sendMsgToParent'>向父组件传值</button>

2.将需要传的值作为$emit的第二个参数，(第一个参数为自定义事件)，该值作为实参传给自定义事件的方法

sendMsgToParent(){
	this.$emit("listenToChildEvent","子组件向父组件传的值")
}

3.在父组件引入子组件并在子组件标签上绑定对自定义事件的监听

<child @listenToChildEvent='showMsgFromChild'>向父组件传值</child>

4.在父组件方法中得到子组件传来的值。

showMsgFromChild(data){
	console.log(data) //子组件向父组件传的值
}

总结：在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了