vue中父子组件的传值方式(props、$emit)

父 => 子 props

Parent.vue部分代码用v-bind绑定处理，修改如下：

<template>
    <div>
        <h1>父文件内容</h1>
        <m-child :msg="'父向子传值'"></m-child>
    </div>
</template>

Child.vue代码用props做接收处理：

<template>
    <div>
            <h2>子组件</h2>
            <h3>{{msg}}</h3>
    </div>
</template>

<script>
    export default {
      props:{
          msg:{
              type:String,
              default: ''
          }
      }
    }
</script>

子 => 父 $emit

Parent.vue部分代码用v-on绑定处理，修改如下：

<template>
    <div>
        <h1>父文件内容</h1>
        <m-child msg="父向子传值" @myshowMsg="showMsg"></m-child>
        <h3>{{msg}}</h3>
    </div>
</template>

<script>
import MChild from './Child'

    export default {
     data(){
         return{
            msg: ''
         }
     },
        components:{
            MChild,
        },
        methods:{
            showMsg(val){
                this.msg = val
            }
        }
    }
</script>

Child.vue代码用$emit做接收处理：

<template><!-- 组件 -->
	<div> 
		<button @click="passMsg">111</button>
    </div>
</template>
<script>
	export default {   //将文件暴露出去,方便接收配置
		name:'son',
		methods: {
			passMsg(){
                this.$emit('myshowMsg','hello')      //传递自定义的事件和信息
            }
		}
		
	};
</script>