vue组件传值

Vue组件之间的传值可以通过props、$emit、vuex等方式实现。

1. Props：父组件通过props向子组件传递数据，子组件通过props接收父组件传递的数据。

// 父组件
<template>
  <child-component :name="name"></child-component>
</template>

<script>
export default {
  data() {
    return {
      name: 'Vue'
    }
  },
  components: {
    ChildComponent
  }
}
</script>

// 子组件
<template>
  <div>{{ name }}</div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  }
}
</script>

2. $emit：子组件通过$emit触发父组件的事件，传递数据。

// 父组件
<template>
  <child-component @change-name="handleChangeName"></child-component>
  <div>{{ name }}</div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Vue'
    }
  },
  components: {
    ChildComponent
  },
  methods: {
    handleChangeName(newName) {
      this.name = newName;
    }
  }
}
</script>

// 子组件
<template>
  <button @click="handleClick">Change Name</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('change-name', 'React');
    }
  }
}
</script>

3. Vuex：可以使用Vuex来管理应用程序的状态，实现组件间的数据共享。

以上是三种常用的组件传值方式，选择哪种方式取决于具体应用场景。