vue子传父不报错但触发不了父组件事件

vue子传父 不报错但触发不了父组件事件

这图真好看

img

最近学习vue的组件之间数据传递，发现了一个问题。
需求：将子组件中的input里的内容传给父组件显示

我的实现方式，不报错，但无法触发父组件的 transContent()

<body>
    <div id="app">
        <parent></parent><!-- parent组件 -->
    </div>
    <!-- parent组件内容 -->
    <template id="tmpParent">
        <div>
            <child @childFn="transContent"></child> <!--  parent组件 里面的 child组件 -->
            子组件传来的值：{{msg}}
        </div>
    </template>
    <!-- child组件内容 -->
    <template id="tmpChild">
        <div>
            <button @click="click">send</button>
            <input type="text" v-model="msg">
        </div>
    </template>
    <!-- 本地 -->
    <script src="./vue2.6.14.js"></script>
    <script>
        // 注册父组件
        Vue.component('parent', {
            template: '#tmpParent',
            data() {
                return {
                    msg: ''
                }
            },
            methods: {
                transContent(childMsg) {
                    this.msg = childMsg
                    console.log(this.msg);
                }
            }
        });
        // 注册子组件
        Vue.component('child', {
            template: '#tmpChild',
            data() {
                return {
                    msg: '子组件中的消息'
                }
            },
            methods: {
                click() {
                    this.$emit('childFn', this.msg);
                    console.log(this.msg);
                }
            }
        });
       // 实例 vue
       let vm = new Vue({el: '#app'});
    </script>
</body>

img

书上的实现方法，可以运行

<body>
    <div id="app">
        <parent></parent><!-- parent组件 -->
    </div>
    <!-- parent组件内容 -->
    <!-- <template id="tmpParent">
        <div> -->
            <!--  parent组件 里面的 child组件 -->
            <!-- <child @childFn="transContent"></child> 
            子组件传来的值：{{msg}}
        </div>
    </template> -->
    <!-- child组件内容 -->
    <template id="tmpChild">
        <div>
            <button @click="click">send</button>
            <input type="text" v-model="msg">
        </div>
    </template>
    <!-- 本地 -->
    <script src="./vue2.6.14.js"></script>
    <script>
        // 注册父组件
        Vue.component('parent', {
            template: `<div>
            <child @childFn="transContent"></child> <!--  parent组件 里面的 child组件 -->
            子组件传来的值：{{msg}}
        </div>`,
            data() {
                return {
                    msg: ''
                }
            },
            methods: {
                transContent(childMsg) {
                    this.msg = childMsg
                    console.log(this.msg);
                }
            }
        });
        // 注册子组件
        Vue.component('child', {
            template: '#tmpChild',
            data() {
                return {
                    msg: '子组件中的消息'
                }
            },
            methods: {
                click() {
                    this.$emit('childFn', this.msg);
                    console.log(this.msg);
                }
            }
        });
       // 实例 vue
       let vm = new Vue({el: '#app'});
    </script>
</body>

img

题主您好，按照你的方法你可以将this.$emit('childFn', this.msg);替换成this.$emit('childfn', this.msg);就可以了，原因很简单 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 @childFn 将会变成 v-on:childfn ——导致 childFn不可能被监听到。

或者我们也可以直接将this.$emit('childFn', this.msg);替换成tthis.$parent.transContent();也可以实现；直接调用父组件的方法

img


你把这个代码换成下面的就可以了

img

transContent 里能打印childMsg 吗？

是可以的，而且我看你控制台确实有两处输出

img