<script setup>是在vue3.2之后新增的语法糖,简化了API的写法
1.声明的变量无需return,可以直接在模板中使用,实现了顶层的绑定
2.引入组件会自动注册,无需再使用components
<script>
export default {
data() {
return {
dialogVisible: false
};
},
};
</script>
------------------------------------
<script setup> import {ref} from "vue"; const dialogVisible=ref(true) </script>
3.使用defineProps接收父组件传递的值,返回的是props对象其中的值是只读的,可以在模板中直接使用,defineEmits获取父组件的自定义事件,defineExpose属性/方法对外暴露
<template>
<p>父组件</p>
<child ref="childRef" :value="parentValue" @func="func"/>
</template>
<script setup>
import child from "./child";
const parentValue = ref('我是爸爸');
const func = (params) => {
parentValue.value = params
};
const childRef = ref(null);
onMounted(()=>{
// 调用子组件中的参数和函数
console.log(childRef.value.childValue);
childRef.value.childFn();
});
</script>
<script>
export default {
name: "parent"
}
</script>
<--! -------------------------------------------------------->
<template>
<p>子组件</p>
<p>{{ value }}</p>
<button @click="emit('func', '哈哈哈')">点击</button>
</template>
<script setup>
import { defineProps, defineEmits, defineExpose } from 'vue'
// 接收父级传过来的参数
const props = defineProps(["value"]);
// 接收父级传过来的方法
const emit = defineEmits(["func"]);
const childValue = '我是儿子';
const childFn = () => {
console.log("我是子组件中的方法");
}
// 将参数childValue和函数childFn暴露给父组件
defineExpose({
childValue,
childFn
});
</script>
<script>
export default {
name: "child"
}
</script>
标签:vue,const,childValue,value,组件,childFn,ref From: https://www.cnblogs.com/kun1790051360/p/18124707