海市科技网站建设,昆明购物网站建设,wordpress手机怎么使用,免费建立网页vue前端开发自学,子组件传递数据给父组件,使用$emit
父子组件之间互相传递数据的情况非常常见#xff0c;下面为大家介绍的是#xff0c;来自子组件#xff0c;给父组件传递数据的情况。
templateh3组件事件demo/h3Child someEventgetI…vue前端开发自学,子组件传递数据给父组件,使用$emit
父子组件之间互相传递数据的情况非常常见下面为大家介绍的是来自子组件给父组件传递数据的情况。
templateh3组件事件demo/h3Child someEventgetInfo/p我的位置是父:{{ message }}/p
/template
script
import Child from ./Child.vue
export default{data(){return {message:}},components:{Child},methods:{getInfo(data){this.message data}}
}
/script
如图以上代码是父组件的代码情况ComponentEvent.vue。
可以看出来里面的特殊点在于有个子组件的引用和标签的调用。
在子组件的标签里面定义了一个事件名字有点奇怪这个就是vue2老版本里面的称谓“自定义事件”其实在这里vue3简称了而已。实际上还是那个东西。改成了一个新名字罢了。叫“组件事件”。
这个自定义事件的名字必须和子组件里你自己定义的名字保持吻合才能正常传递过来数据。
templateh3Child/h3button clickclickHandle传递数据给父组件的按钮/button
/template
scriptexport default{data(){return{msg:我是子组件的数据信息}},methods:{clickHandle(){this.$emit(someEvent,this.msg)}}}
/script
这个代码就是子组件里面 的内容了。可以看见里面我们有一个按钮绑定了一个点击事件这个点击事件会触发一个this.$emit()这个东西就是给父组件传递数据使用的前面是一个字符串的数据事件的名字。后面是数据信息父组件里面即将接受到的数据信息。 如图点击按钮就可以看见在父组件里确实是接受到了来自子组件传递过来的信息了。
