vue3组件详细介绍

一、不使用语法糖

    1、组件注册

        注册和vue2中基本相同

import nogrammarcomfrom "../components/nogrammarcom.vue";

export default {

components:{

nogrammarcom,

}

  2、传参

//父组件调用子组件，传值name

插槽

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差不多

    切换动态组件

  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,

}

}

}

二、使用语法糖

    语法糖setup,在script标签中直接使用，就相当于setup(),在语法糖中怎么使用setup中prpos和context参数呢，setup script语法糖提供了新的API来供我们使用

使用语法糖，在父组件中直接引用，无需注册

defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。