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/n/256462.html