vue3 父子组件传值

父传子组件

<template>
  <div>
    <!-- 通过自定义属性传递值 -->
    <Subassembly :value="doc"/>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Subassembly from './Subassembly.vue'

// 待传递的值
const doc = ref('hello');

</script>

　　子组件接收

<template>
  <div>
    <!-- 使用父组件传递过来的值 -->
    <h1>{{ props.value }}</h1>
  </div>
</template>
<script setup>
// 从 vue 中引入defineProps
import { defineProps } from 'vue'

// 接收父组件传递过来的值
const props = defineProps(['value'])

</script> 

子组件传父组件

<template>
  <div>
    <!-- 使用父组件传递过来的值 -->
    <h1>{{ props.value }}</h1>
    <button @click="handelClick">子组件按钮</button>
  </div>
</template>
<script setup>
// 从 vue 中引入defineProps, defineEmits
import { defineProps, defineEmits } from 'vue'

// 接收父组件传递过来的值
const props = defineProps(['value'])
// 接收父组件传递过来的方法
const emit = defineEmits(['func'])

const handelClick = function  () {
    //调用父组件传递过来的方法，传入参数修改父组件的值
    emit('func', 'hello world')
}
</script>

　　父组件接收

<template>
  <div>
    <!-- 通过子组件自定义属性传递值、方法 -->
    <Subassembly :value="doc" @func="sayHello" />
    <button @click="sayHello(doc)">父组件按钮</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Subassembly from './Subassembly.vue'

// 待传递的值
const doc = ref('hello');

// 待传递的方法
const sayHello = function (data) {
  alert(data);
}