版权声明:未经同意,不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83142775
html
<div id="app">
<com1 :parentmsg="msg" @func="getMsgFromSon"></com1>
<h1>{{msgFromSon}}</h1>
</div>
<template id="tmp1">
<div>
<h1>这是子元素!--- {{parentmsg}}</h1>
<input type="button" value="向父组件传递消息" @click="sendMsg">
</div>
</template>
js
let com1 = {
template: '#tmp1',
data() {
return {
msg: '子传数据给父!'
}
},
props: ['parentmsg'],
methods: {
sendMsg() {
this.$emit('func', this.msg)
}
}
};
let vm = new Vue({
el: '#app',
data: {
msg: '父传数据给子!',
msgFromSon: ''
},
methods: {
getMsgFromSon(data) {
this.msgFromSon = data;
}
},
components: {
com1
}
});