vue3的传值

Vue3中的传值方式与Vue2基本相同，包括父组件向子组件传值和子组件向父组件传值。不同的是，Vue3引入了Composition API，可以使用setup函数来进行传值。

父组件向子组件传值

父组件可以通过props向子组件传递数据。在子组件中通过props接收数据。

父组件：

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

子组件：

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

子组件向父组件传值

子组件可以通过emit事件向父组件传递数据。在父组件中通过@监听事件接收数据。

子组件：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello World');
    }
  }
}
</script>

父组件：

<template>
  <div>
    <child-component @message="receiveMessage"></child-component>
    <div>{{ message }}</div>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    receiveMessage(msg) {
      this.message = msg;
    }
  }
}
</script>

setup函数传值

setup函数是Vue3中新引入的函数，可以在组件渲染之前执行。通过setup函数可以将数据和方法暴露给模板中使用。

父组件：

<template>
  <div>
    <child-component :message="message" :change-message="handleChangeMessage"></child-component>
    <div>{{ message }}</div>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';
export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello World');
    const handleChangeMessage = (msg) => {
      message.value = msg;
    };
    return {
      message,
      handleChangeMessage
    };
  }
}
</script>

子组件：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
export default {
  props: ['message', 'changeMessage'],
  methods: {
    sendMessage() {
      this.changeMessage('New Message');
    }
  }
}
</script>

以上是Vue3的传值方式，其中setup函数是Vue3中新引入的函数，可以更加灵活地传值。