Vue執(zhí)行方法,方法獲取data值,設(shè)置data值,方法傳值操作

更新時(shí)間：2020年08月05日 09:15:06 作者：chesterdotchen

這篇文章主要介紹了Vue執(zhí)行方法,方法獲取data值,設(shè)置data值,方法傳值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

方法寫在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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: