好资源导航 » 文章资讯 » Vue执行方法,方法获取data值,设置data值,方法传值操作

Vue执行方法,方法获取data值,设置data值,方法传值操作

2023-07-19 07:33:03 81

方法写在methods中

v-on:click="run()"

@click="run()"

方法获取data中的数据通过this.数据获取

方法设置data中的数据通过this.数据=''设置

例如通过this.list=[1,2,3]，设置list的值，让页面出循环list

可通过@click="run('123')"，将值传到方法中

可通过@click="run($event)"，将事件对象传到方法中，然后根据事件对象的e.srcElement设置点击标签的属性，也可以通过e.srcElement.dataset获取自定义属性

补充知识：Vue兄弟组件通过事件广播传递数据

非父子组件传值

通过事件广播实现非父子组件传值

1.新建js，引入并实例化Vue

importVuefrom'vue'
varVueEvent=newVue();
exportdefaultVueEvent;

2.子组件A中引入VueEvent，并广播事件

importVueEventfrom'../model/VueEvent.js'

VueEvent.$emit('to-news',this.msg);

3.子组件B中引入VueEvent，并监听事件

importVueEventfrom'../model/VueEvent.js'

VueEvent.$on('to-news',data=>{console.log(data);});

示例代码

importVuefrom'vue'
varVueEvent=newVue();
exportdefaultVueEvent;

以上这篇Vue执行方法,方法获取data值,设置data值,方法传值操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。