vue3的一些

vue3选项式写法

vue3组合式写法

setup函数

1.父传子

   setup函数可以接收两个参数：props和context。

         1 props：表示组件的props，即父组件传递给子组件的属性。

         2 context：表示组件的上下文对象,包含了attrs、slots、emit、expose等属性。

        step1.在父组件中渲染子组件标签时，添加key=value形式的键值对传递属性数据

        step2.在子组件中，利用props字段（数组/对象两种形式），声明可以接收的属性信息

        step3.在子组件中的setup函数中，setup函数可以接受两个参数，setup(props,context)

2.子传父

        step1.在父组件的子组件标签上绑定一个自定义事件

                eg:@custom='事件名'

        step2.在父组件中 事件名对应的函数中完成业务逻辑，该函数中会接受子组件传递来的

                数据作为参数

        step3.在子组件中，利用emits字段。声明可触发的事件的名称或进行可出触发事件的校验

                eg:  emits:['custom']

        step4.在子组件中，在setup函数中，因为setup函数的第二个参数

                        setup(props,context){

                                context.emit(参1，参2，。。。)

                                        //参数1是emits中的某个名字，之后的参数是传递的参数

                        }

3.父组件使用子组件的数据或方法

        step1.在父组件中的子组件标签上，添加ref=‘xxx’

        step2.在父组件的setup函数中中，可以利用 const xxx = ref() 得到子组件的dom实例

        step3.

                情况1：

                        在子组件中只有return，没有context.expose()。那么子组件dom实例xxx的value属性上，就有子组件return出去的数据、方法。这样在父组件的setup函数中，就可以利用xxx.value.~~调用到子组件的数据、方法

                情况2：

                        在子组件中只要用到context.expose(对象)。那么子组件dom实例xxx的value属性上，就只有通过context.expose()暴露出去的内容了。

即当显示调用了context.expose()将内部的数据或方法向外暴露，原来return返回的数据与方法就不可在父组件中直接使用了。

---

setup语法糖

1.父传子

  使用defineProps(对象)

        step1.在父组件的子组件标签上，通过key=value来传递信息。

                eg: <son nickname='绰号'></son>

        step2.在子组件中，利用defineProps来声明可接收的属性信息

                eg：defineProps({nickname:string}) 这样就可以在模版中使用nickname了

                如果还需要对传递来的信息做处理，首先需要先接收

                        const  props = defineProps({nickname:string})

                        props.nickname.split('').reverse().join('')

2.子传父

     使用defineEmits(数组)

          step1.在父组件的子组件标签上，自定义事件

                eg:<son @custom="val=>msg=val"></son>

          step2.在父组件中 在该事件所对应的函数中完成业务逻辑，该函数中会接受子组件传递

                  来的数据作为参数

          step3.在子组件中，利用defineEmits()声明可触发的事件

                        eg:const  emit = defineEmits(['custom'])

          step4.如何在子组件中调用函数

                        emit(参1，参2)  其中参数1表示名字，参数2表示传递的参数

                        eg:emit('custom','你好')

3.父组件中调用子组件的数据或方法

        在setup函数的语法糖中，因为没有return，所以在父组件中通过ref得到的子组件dom对象的value是没有东西的。就需要用到defineExpose(对象)