vue this.emit,vue3.0 emit

　　本文主要介绍Vue.js的$emit使用案例的详细说明，通过一个简单的案例来说明对该技术的理解和使用。以下是详细内容，有需要的朋友可以参考一下。

　　1.父组件可以使用props将数据传递给子组件。

　　2.子组件可以使用$emit来触发父组件的自定义事件。

　　Vm。$emit( event，arg) //触发当前实例上的事件

　　vm。$on(事件，fn)；//监听事件event后运行fn；

　　示例：子组件：

　　模板

　　火车-城市

　　从父组件传递到子组件的H3到城市：{{senddata}}/H3

　　br/button @ Click= select(` Dalian `) 单击此处将 Dalian 启动到父组件/按钮

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称：“火车城”，

　　Props:[sendData]，//用于接收父组件到子组件的数据。

　　方法：{

　　选择(值){

　　let data={

　　城市名：瓦尔

　　};

　　这个。$emit(showCityName ，data)；//触发//select事件后，会自动触发showCityName事件。

　　}

　　}

　　}

　　/脚本

　　父组件：

　　模板

　　差异

　　div的父组件的ToCity{{toCity}}/div

　　train-city @ show city name= update city :send data= to city /train-city

　　/div

　　模板

　　脚本

　　从导入TrainCity。/train-city ；

　　导出默认值{

　　名称：“索引”，

　　组件：{TrainCity}，

　　data () {

　　返回{

　　城市：“北京”

　　}

　　},

　　方法：{

　　UpdateCity(data){//触发子组件城市选择-城市选择的事件

　　this . to city=data . city name；//更改了父组件的值

　　console . log( to city: this . to city )

　　}

　　}

　　}

　　/脚本

　　图1:点击之前的数据。

　　图2:点击后的数据

　　本文关于Vue.js的$emit使用案例的详细说明到此为止，更多关于Vue.js的$emit使用情况，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。