vue子传父 不报错但触发不了父组件事件
这图真好看
最近学习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>
书上的实现方法，可以运行
<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>
