Vue.js父子组件间通信示例-优快云博客

本文链接：https://blog.youkuaiyun.com/qianduan2001_5/article/details/131563120
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>

    <!-- 父传子使用自定义属性 字传父使用自定义事件传值 -->
    <div id="myApp">
        <!-- 4.表示接受到的子组件的值 -->
        <h2>父组件数据:{{fatherData}}</h2>

        <!-- 3.设置出口在父组件显示 -->
        <!-- 7.在子组件标签上,用v-on/@绑定自定义事件,调用父组件中的函数 -->
        <my-com @myevent="getInput"></my-com>
    </div>
    <!-- 组件模板 -->
    <template id='myTem'>
        <div>

            <!-- 子传父常用于子组件表单传递给父组件发送给后端 -->
            <!--2.给子组件绑定一个双向数据绑定 v-model -->
            <!-- @input="myInput" 自定义事件 -->
            子组件表单: <input type="textr" @input="myInput" v-model="info">
        </div>
    </template>
    <script>
        Vue.component('myCom', {
            template: '#myTem',
            data() {
                return {
                    //1. 设置一个空数组存储input里面的值
                    info: ""
                }
            },
            // 5.可以以下3种方法获得子组件表单输入的内容 

            updated() {//可以在更新函数中拿到输入的结果
                console.log(1, this.info);
                // 6.在子组件中调用$emit函数发射一个自定义事件
                // 参数一:自定义的事件名(不支持驼峰),参数二: 事件传参
                this.$emit("myevent", this.info)

            },
            watch: {
                info(value) {//也可以在监视器中拿到输入的结果
                    console.log(2, value);
                }
            },
            methods: {
                myInput(event) {
                    // 定义myInput函数绑定在input上面
                    // 在input事件函数中拿到输入的结果
                    console.log(3, event.target.value);

                }
            }


        })
        new Vue({
            el: '#myApp',
            data: {
                // 3.设置一个空数组 
                fatherData: ""
            },
            methods: {
                // 9.在父组件中定义自定义事件的处理函数,把参数赋值给父组件并展示
                getInput(data) {
                    console.log("父组件:", data);
                    this.fatherData = data;
                }
            },
        })

        // 总结:子组件向父组件传值的步骤
        // 1,在子组件中使用this.$emit发射自定义事件,
        // 2.在父组件模板中的子组件标签上,绑定自定义事件,并调用父组件中的事件处理函数
        // 3.在父组件中methods字段中,定义事件处理函数,通过参数拿到子组件传过来的数据,赋值给父组件变量并显示
    </script>
</body>

</html>
vue2prope子传父
