- 学到Vue的组件内传值时,props父传子还能理解,但是对子组件给父组件传值(也就是 e m i t 方法),对于这个 emit方法),对于这个 emit方法),对于这个emit我感觉有点绕,知道它的作用,但是对它的用法还是掌握不好,主要还是对于为什么这么用很疑惑。
- 对父组件给子组件传值很简单,也很好理解。父组件给子组件传值只要在子组件标签内用V-bind写一个函数方法(也可以传参数)用props接收就可以直接使用了。但是到子组件给父组件传值就变得复杂了,首先要先在子组件标签内声明触发 e m i t 的事件,触发条件后用 emit的事件,触发条件后用 emit的事件,触发条件后用emit发送自定义事件(包含事件名与事件体)。
- 到此还没结束,$emit发送事件或数据后,父组件是需要监听的,那就需要在父组件内用V-on绑定接收事件或数据。最后在父组件的methods或computed进行操作处理。
- 目前我是这么理解的,也参考了其他人的博客或文章,可能理解比较片面,如果有错或者误人子弟也请联系我改正。这是我在学习路上的记录贴,文字描述肯定不直观,难以记忆,下面配上代码加深理解。
1.子组件
Vue.component("son", {
data() {
return {
msg: "我是子组件",
tip:"我是经过子组件改变的父组件"//tip是要传给父组件的数据
}
},
methods: {
//这是写好的change方法
change: function () {
var sonMsg = this.tip //将tip数据赋值给sonMSg
this.$emit("changeSon", sonMsg)/*用$emit发送自定义的事件(changeSons是自定义事件,sonMsg是参数,也是子组件要传给父组件的值,用的是函数传参)*/
}
},
template: `
<div>
<h1>{{msg}}</h1><!-- 子组件中的msg -->
<button @click="change" type="submit">改变父组件</button>
<!-- 通过单击事件触发methods中的change方法 -->
</div>`,
})
2.父组件
Vue.component("father", {
data() {
return {
msg: "我是父组件"
}
},
methods: {
/*定义好的方法,用来在父组件中把子组件传过来的值赋值给msg,来替换原本的值,这最后一步就完成了子组件对父组件的传值并且渲染到页面上 event也是$event*/
changeFather: function (event) {
// console.log(event);
this.msg = event/*将传来的event,实际是tip的值赋值给父组件data中的msg*/
}
},
template: `
<div>
<h1>{{msg}}</h1> <!-- 父组件中的msg -->
<son @changeSon="changeFather($event)"></son>
<!-- @changSon是监听数据或者说是接收数据的,这里的changeSon要与之前自定义的事件名称一致,changeFather方法是在父组件定义好的,$event是子组件传递的数据,也就是tip的值 -->
</div>`,
}),
3.完整代码(可直接运行)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<father>
</father>
</div>
<script src="../js/Vue_2.7.10.js"></script>
<script>
Vue.component("father", {
data() {
return {
msg: "我是父组件"
}
},
methods: {
changeFather: function (event) {
// console.log(event);
this.msg = event
}
},
template: `
<div>
<h1>{{msg}}</h1>
<son @changeSon="changeFather($event)"></son>
</div>`,
}),
Vue.component("son", {
data() {
return {
msg: "我是子组件",
tip:"我是经过子组件改变的父组件"
}
},
methods: {
change: function () {
var sonMsg = this.tip
// console.log(sonMsg);
this.$emit("changeSon", sonMsg)
}
},
template: `
<div>
<h1>{{msg}}</h1>
<button @click="change" type="submit">改变父组件</button>
</div>`,
})
new Vue({
el: "#app",
})
</script>
</body>
</html>
4.组件层级结构图
文章来源:https://www.toymoban.com/news/detail-782231.html
5.效果图
文章来源地址https://www.toymoban.com/news/detail-782231.html
到了这里,关于Vue中的$emit的使用方法与理解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!