Vue傳值詳解

一、Vue傳值html

在Vue中，可以使用{{data}}的形式進行HTML綁定，將data中的數據渲染到HTML標籤中，這也是Vue最基本的傳值方式。下面是一個Vue組件的示例：

Vue.component('example', {
  data: function () {
    return {
      message: 'Hello Vue!'
    }
  },
  template: '<div>{{ message }}</div>'
})

上面的示例中，使用data初始化了一個名為message的變量，並將其渲染在template中的div標籤中。

二、Vue傳值table不刷新

在Vue中，當我們通過v-for指令渲染table時，如果表格內容發生變化，table可能不會自動更新。這時我們需要使用Vue提供的雙向綁定機制。

<table>
  <thead>
    <tr>
      <th>名字</th>
      <th>年齡</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in items" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </tbody>
</table>

上面的代碼中，v-for指令會根據數組items中的數據來渲染表格，當items發生變化時，表格也會隨之更新。

三、Vue傳值方式

除了上面提到的HTML綁定和雙向綁定外，Vue還提供了其他傳值方式，如props、事件、ref等。

1. 使用props傳遞屬性值

Vue.component('child', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
})

<!--在父組件中傳遞屬性值-->
<child message="Hello Vue!"></child>

上面的代碼中，通過props屬性來定義子組件可以接收什麼屬性值，在父組件中使用子組件時，通過在子組件標籤中綁定props的名稱和值，來傳遞屬性值至子組件。

2. 使用事件傳遞參數

Vue.component('child', {
  template: '<button @click="$emit(\'my-event\', \'Hello Vue!\')">觸發事件</button>'
})

<!--在父組件中監聽事件-->
<child @my-event="handleEvent"></child>

上面的代碼中，子組件通過$emit方法觸發事件，並向父組件傳遞參數。在父組件中，使用@符號來監聽子組件觸發的my-event事件，同時指定事件發生時要執行的方法handleEvent。

3. 使用ref獲取實例

<div ref="myDiv"></div>

<script>
var myDiv = this.$refs.myDiv;
</script>

上面的代碼中，使用v-ref屬性給DOM元素設置一個引用名，然後在JavaScript中使用$refs來獲取該元素的實例。

四、Vue傳值res是啥

在Vue組件中，我們常常需要使用異步請求獲取數據，並將數據傳遞給子組件進行渲染。這時，我們需要在父組件中定義一個data變量來存儲異步請求的返回結果，然後通過props屬性將結果傳遞給子組件。

Vue.component('child', {
  props: ['res'],
  template: '<div>{{ res }}</div>'
})

<script>
{
  data() {
    return {
      res: null
    }
  },
  methods: {
    getData() {
      axios.get('/api/data').then(res => {
        this.res = res.data;
      })
    }
  },
  mounted() {
    this.getData();
  }
}
</script>

<child :res="res"></child>

上面的示例中，父組件使用axios庫向後端請求數據，異步獲取數據後將結果保存在res變量中，並將res作為props傳遞給子組件。

五、Vuex傳值

Vuex是Vue官方推出的狀態管理庫，主要用於管理組件之間的共享狀態。使用Vuex，我們可以在全局定義一個store來存儲狀態，並在需要的組件中引入store來獲取、修改狀態。

1. 定義store

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count(state) {
      return state.count;
    }
  }
});

export default store;

上面的代碼中，我們定義了一個包含state、mutations、actions和getters四個屬性的store。其中，state用於存儲狀態，mutations用於修改狀態，actions用於異步修改狀態，getters用於獲取狀態。

2. 在組件中使用store

<template>
  <div>
    {{ count }}
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapGetters(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

上面的代碼中，我們使用mapGetters和mapActions輔助函數來將store中的狀態和方法映射到組件的計算屬性和方法上，即可直接在組件中使用store中的狀態和方法。

六、Vue傳值為啥在created

在Vue中，組件被創建時，會依次執行beforeCreate、created、beforeMount、mounted等生命周期鉤子函數。由於created生命周期鉤子在組件實例創建完成後立即調用，所以在這個鉤子中進行數據初始化，既能夠保證數據馬上可用，又能夠避免在數據初始化之前嘗試訪問部分有數據依賴的組件，導致程序出錯。

Vue.component('example', {
  data: function () {
    return {
      message: null
    }
  },
  created: function () {
    axios.get('/api/data').then(res => {
      this.message = res.data;
    })
  },
  template: '<div>{{ message }}</div>'
})

上面的代碼中，created生命周期鉤子用來初始化組件的message變量，通過異步請求獲取數據並將數據保存在message中。這樣，當模板渲染時，message變量中的值已經被初始化為後端返回的數據，可以馬上使用。

七、Vue傳值text

在Vue中，可使用v-model指令將表單元素的值與data中的變量進行雙向綁定，還可以使用v-bind指令將變量綁定到元素的屬性中。

<template>
  <div>
    <input v-model="text">
    <span v-text="text"></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: null
    }
  }
}
</script>

上面的代碼中，使用v-model指令雙向綁定input元素的值和組件的text變量，使用v-text指令將text變量的值渲染在span標籤中。

八、Vue傳值幾種

在Vue中，可以使用多種方式進行傳值，包括：

HTML綁定
雙向綁定
props屬性
事件
ref屬性
Vuex狀態管理

通過學習不同的傳值方式，我們可以根據具體場景選擇最合適的傳值方式，以實現組件間的數據交互。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/256462.html