组件
你可以使用Vue2的属性写法，详细内容见【Vue2】组件
使用组件
父组件这样写：
<template>
<childPart />
</template>
<script setup>
import childPart from './components/childPartView.vue';
// 其它内容
</script>父组件向子组件传递函数/变量
注意，子组件获取到的父组件参数是不能在子组件中修改的
父组件这样写：
<template>
<childPart :val="val" :handleClick="handleClick" />
</template>
<script setup>
import {ref} from "vue";
import childPart from './components/childPartView.vue';
var val=ref("Hello world!");
const handleClick=()=>{
console.log("Hello world!");
}
</script>子组件这样写
<template>
<div>{{ props.val }}</div>
</template>
<script setup>
const props = defineProps(["val", "handleClick"])
</script>父组件调用子组件函数/变量
注意，父组件获取到的子组件变量是可以在父组件中修改的
父组件这样写：
<template>
<childPart ref="childRef" />
<button @click="callChild"></button>
</template>
<script setup>
import {ref} from "vue";
// 注意变量名和子组件的ref名称相同
const childRef=ref(null);
function callChild(){
childRef.value.testFun("hello world!");
consle.log(childRef.value.childVal)
}
</script>子组件这样写：
<template>
</template>
<script setup>
//可以暴露函数或者变量
function testFun(val){
console.log(val);
}
const childVal="Hello world!";
// 注意要设置为暴露
defineExpose({
testFun,
childVal
})
</script>子组件调用父组件函数
父组件这样写：
<template>
<childPart @testFun="testFun" />
</template>
<script setup>
function testFun(val){
// ...
}
</script>子组件这样写
<template>
<button @click="testFun">测试按钮</button>
</template>
<script setup>
// 注意定义需要emit的函数
const emit = defineEmits([ "testFun" ]);
function testFun(){
emit("testFun", "hello"); // emit(函数, 参数)
}
</script>全局变量跨层传递
在定义组件中
<script setup>
import { provide } from 'vue'
provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>在获取组件中
<script setup>
import { inject } from 'vue'
const message = inject('message')
</script>