vue3组件详细介绍
一、不使用语法糖
1、组件注册
注册和vue2中基本相同
import nogrammarcomfrom "../components/nogrammarcom.vue";
export default {
components:{
nogrammarcom,
}
2、传参
//父组件调用子组件，传值name
<nogrammarcom :name="name" @func="func" style="color: red"> 插槽</nogrammarcom>
import nogrammarcomfrom "../components/nogrammarcom.vue";
import {ref,computed}from 'vue';
export default {
components:{
nogrammarcom,
},
setup(){
const name=ref('我是父组件传值给子组件')
const dynamic=ref(dy)
return {
name,
dynamic,
type,
func(data){
console.log(data)
}
}
子组件
在setup（prpos,context）有两个参数，其中prpos是父组件传来的参数，因为prpos是响应数据，使用直接使用解离会失去响应属性，需要使用到toRefs、toRef这两个方法，toRefs方法当没有这个参数的时候会报错，然后我们就可以使用toRef了。如下
import {toRefs,toRef }from "vue"
export default {
props: {name:String },
setup(props,context){
console.log(props)
let { name } =toRefs(props)
let name2 =toRef(props,'name')
console.log(name.value+'?')
return{
name,
name2,
}
}
另一个参数context，是本身也有三个参数attrs,slots,emit，attrs组件的属性，slots 组件内的插槽，emit 自定义事件 子组件
export default {
props: {name:String },
setup(props,context){
const { attrs,slots,emit } = context//attrs组件的属性，slots 组件内的插槽，emit 自定义事件 子组件
emit('func','我是子组件传父组件的参数')//子组件向父组件传值
console.log(slots.default())//获取插槽数据
console.log(attrs.style)//组件属性
return{
attrs
}
}
3、动态组件
动态组件是使用component 标签 使用:is,根据需求展示不同的组件，基本使用方法vue2差不多
<component :is="dynamic"></component>
<el-button type="info" @click="type=!type">切换动态组件
import dynamic1from "../components/dynamic1.vue";
import dynamic2from "../components/dynamic2.vue";
import {ref,computed}from 'vue';
export default {
components:{
dynamic1,
dynamic2
},
setup(){
const type=ref(true)
const dy=computed(()=>{
return type.value?dynamic1:dynamic2
})
const dynamic=ref(dy)
return {
name,
dynamic,
}
}
}
</script>
二、使用语法糖
语法糖setup,在script标签中直接使用，就相当于setup(),在语法糖中怎么使用setup中prpos和context参数呢，setup script语法糖提供了新的API来供我们使用
使用语法糖，在父组件中直接引用，无需注册
defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。
<script setup>
defineProps({
name:String
})
let $myemit=defineEmits(['emitfun'])
const emitfun=()=>{
$myemit('emitfun','这是子组件传的值')
}
</script>
