vue 父子组件通信 props和emit使用实例

效果：

子组件是一个input框，input框默认带有从父组件传入的值“测试一下”，修改input框里的值，父组件的展示值跟着改变。

效果图：

① 默认：

②修改时：

实现：

父子组件文件目录：

<template>
  <div>
    <p>父子组件通信，父组件msg值：{{msg}}</p>
    <child-componet :message="msg" v-on:getChildData="getData"></child-componet>
  </div>
</template>

<script>
    import childComponet from '../components/childComponent'

    export default {
        components: {
            childComponet
        },
        data() {
            return {
                msg:'测试一下'
            }
        },
        methods: {
            getData(val) {
                this.msg = val
            }
        }
    }
</script>

子组件：

<template>
    <input type="text" v-model="myMessage" @input="passData(myMessage)">
</template>

<script>
    export default {
        name: "childComponent",
        data() {
            return {
                myMessage : this.message
            }
        },
        props: {
            message : String
        },
        methods: {
            passData(val) {
                this.$emit('getChildData',val)
            }
        }
    }
</script>