方法寫(xiě)在methods中

v-on:click='run()'

@click='run()'

方法獲取data中的數(shù)據(jù)通過(guò)this.數(shù)據(jù)獲取

方法設(shè)置data中的數(shù)據(jù)通過(guò)this.數(shù)據(jù)=’’設(shè)置

例如通過(guò)this.list=[1,2,3]，設(shè)置list的值，讓頁(yè)面出循環(huán)list

可通過(guò) @click='run(’123’)'，將值傳到方法中

可通過(guò) @click='run($event)'，將事件對(duì)象傳到方法中，然后根據(jù)事件對(duì)象的e.srcElement設(shè)置點(diǎn)擊標(biāo)簽的屬性，也可以通過(guò)e.srcElement.dataset獲取自定義屬性

<template> <div id='app'> {{msg}} <button @click='run()'>@click事件觸發(fā)</button> <button v-on:click='runvon()'>v-on:click事件觸發(fā)</button> <button @click='getMsg()'>獲取data.msg</button> <button v-on:click='setMsg()'>設(shè)置data.msg</button> <ul> <li v-for='item in list'>{{item}}</li> </ul> <button @click='setList()'>設(shè)置List的值</button> <button @click='sendData(’123’)'>方法傳值</button> <button v-on:click='sendEvent($event)'>傳遞事件對(duì)象</button> <button @click='sendEventSet($event)'>傳遞事件對(duì)象，并設(shè)置背景色</button> <button data-a='啦啦啦' @click='sendEventData($event)'>傳遞事件對(duì)象，并獲取自定義屬性</button> </div></template><script>export default { name: ’app’, data () { return { msg: ’123’, list:[] } }, methods:{ run(){ alert('@click事件觸發(fā)') }, runvon(){ alert('v-on:click事件觸發(fā)') }, getMsg(){ alert('我獲取到了msg'+this.msg); }, setMsg(){ this.msg='我是設(shè)置后的值' }, setList(){ for(var i = 0 ; i < 10 ; i++){ this.list.push(i) } }, sendData(a){ alert('穿過(guò)來(lái)的值是：'+a) }, sendEvent(e){ console.log(e); }, sendEventSet(e){ e.srcElement.style.background='red'; }, sendEventData(e){ alert(e.srcElement.dataset.a) } }}</script><style lang='scss'></style>

補(bǔ)充知識(shí)：Vue 兄弟組件通過(guò)事件廣播傳遞數(shù)據(jù)

非父子組件傳值

通過(guò)事件廣播實(shí)現(xiàn)非父子組件傳值

1.新建js，引入并實(shí)例化Vue

import Vue from ’vue’var VueEvent = new Vue();export default VueEvent;

2.子組件A中引入VueEvent，并廣播事件

import VueEvent from ’../model/VueEvent.js’

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

3.子組件B中引入VueEvent，并監(jiān)聽(tīng)事件

import VueEvent from ’../model/VueEvent.js’

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

示例代碼

import Vue from ’vue’var VueEvent = new Vue();export default VueEvent;

<template><div id='home'> <button @click='sendMsg()'>我來(lái)觸發(fā)事件</button></div></template><script>import VueEvent from '../models/VueEvent.js';export default { data() { return { msg: '我是Home的msg' }; }, methods: { sendMsg() { VueEvent.$emit('tonews', this.msg); } }};</script><style></style>

<template><div id='news'> 我來(lái)接受事件--{{msg}}</div></template><script>import VueEvent from '../models/VueEvent.js';export default { data() { return { msg: '我是News的msg' }; }, mounted() { VueEvent.$on('tonews', res => { this.msg = res; }); }};</script><style></style>

<template> <div id='app'> <v-home></v-home> <hr /> <v-news></v-news> </div></template><script>import Home from './components/Home.vue';import News from './components/News.vue';export default { name: 'app', data() { return { msg: 'Welcome to Your Vue.js App' }; }, components: { 'v-home': Home, 'v-news': News }};</script><style lang='scss'></style>

以上這篇Vue執(zhí)行方法,方法獲取data值,設(shè)置data值,方法傳值操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。