组件emit使用
2022-06-16 本文已影响0人
程序猿的小生活
<html>
<head>
<script src="https://unpkg.com/vue@next"></script>
<meta charset="utf-8">
<title>组件$emit使用</title>
</head>
<body>
<div id="app">
<createcomponent @go="sondata"></createcomponent>
{{fatherdata}}
</div>
</body>
<script>
Vue.createApp({
data(){
return{
"fatherdata":"这是父亲数据"
}
},
methods: {
sondata(msg){
this.fatherdata = msg;
}
},
})
.component("createcomponent",{
data(){
return{
msg:"这是儿子组件的数据"
}
},
"template":`<div @click="send">发送组件数据到父级<div>
<div @click="$emit('go',this.msg)">第二种方式通过@click传值</div>`,
methods: {
send() {
this.$emit('go',this.msg);//go相当于自定义组件的自定义事件名称 msg表示传过去参数
}
},
})
.mount("#app")
</script>
</html>
