vue2.0中组件传值的几种方式总结

下面来详细讲解“vue2.0中组件传值的几种方式总结”的攻略，主要包括以下几种方式：

1. 父子组件之间传值

• 父组件向子组件传值：使用props方式，父组件通过属性传递数据给子组件。在子组件中可以使用props定义来接收数据。

示例：

父组件中定义一个属性data，值为字符串类型，在子组件中用props属性来接收定义的属性data。子组件中通过{{}}绑定，即可渲染父组件传递过来的data。

<template>
  <div>
    <Child :data="'Hello World!'"></Child>
  </div>
</template>

<script>
import Child from './components/Child.vue'
export default {
  name: 'Parent',
  components: {
    Child
  }
}
</script>

<template>
  <div>
    <p>{{ data }}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: ['data']
}
</script>

• 子组件向父组件传值：使用$emit方法，在点击事件中调用$emit方法，传递值，父组件中监听子组件触发的事件，从而获得数据。

示例：

子组件定义一个按钮，用于触发事件，传递数据。在子组件中，通过$emit方法将一个自定义事件submit，和需要传递的数据data，传递给父组件。在父组件中，使用@click事件监听submit事件，通过回调函数接收data值。

<template>
  <div>
    <button @click="submitData">Submit data to parent</button>
  </div>
</template>

<script>
export default {
  name: 'Child',
  data () {
    return {
      myData: 'Hello World!'
    }
  },
  methods: {
    submitData () {
      this.$emit('submit', this.myData)
    }
  }
}
</script>

<template>
  <div>
    <Child @submit="receiveDataFromChild"></Child>
  </div>
</template>

<script>
import Child from './components/Child.vue'
export default {
  name: 'Parent',
  components: {
    Child
  },
  methods: {
    receiveDataFromChild (data) {
      console.log(data) // 'Hello World!'
    }
  }
}
</script>

2. 兄弟组件之间传值

兄弟组件之间传值，一般需要引入VueX实现状态管理。VueX 中的 State（状态）在全局范围内管理数据，而 Mutation（变异）则是改变该全局状态的方法。

示例：

定义一个Store实例，其中包括状态state，和修改状态的方法mutation。在组件A中，先computed函数，将store.state传递给所需的变量。在组件B中，通过dispatch（Action）方法，调用mutation，修改对应的state值。组件A中，则自动响应更新。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: 'Hello World!'
  },
  mutations: {
    updateData (state, data) {
      state.message = data
    }
  },
  actions: {
    updateData ({ commit }, data) {
      commit('updateData', data)
    }
  }
})

// ComponentA.vue
<template>
  <div>
    <p>{{ myData }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ComponentA',
  computed: {
    ...mapState({
      myData: state => state.message
    })
  }
}
</script>

// ComponentB.vue
<template>
  <div>
    <button @click="updateData">Update data in Component A</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'ComponentB',
  methods: {
    ...mapMutations([
      'updateData'
    ])
  }
}
</script>

以上就是“vue2.0中组件传值的几种方式总结”的攻略，希望对你有所帮助。