父子传值
父组件
<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>
<!-- 通过子组件自定义属性传递值、方法 -->
<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);
}
</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>
参考文章