父子propschild可以通过defineExpose暴露要传给parent的变量,函数,DOM({}),父组件传递给子组件添加ref属性,使用“refvalue.value.childvariable”语句操作子组件传递的变量、函数、DOM,以及值父子之间是双向绑定的。那么parent是如何传递变量、函数、DOM给child的:1.全部放在child组件标签中。将要传递给子组件的变量、函数、DOM或字母数字作为子组件的属性放在标签中。注意:变量、函数、DOM使用属性绑定指令v-bind,属性前必须加“:”大写数字,如下:grass2.在使用父传递的值之前,在子组件中使用defineProps([])来注册子组件。需要先用defineProps([])注册,注意写法:要传入的值放在[]括号内,值必须加引号。如下:{{'refID:'+ref()}}
{{'ioo变量:'+ioo}}
{{'iddfunction:'+idd()}}
{{'ojDOM:'+oj.outerHTML}}
{{'Nativeattribute:'+id}}
>{{'character:'+ipp}}
</组件>3.生命周期问题通过console.log打印命令可以看到,除了DOM,其他变量、函数、字符、原生属性等都是在初始阶段传入的,ref标记的DOM只传入更新前的值,所以使用时要特别注意。4.模板部分和逻辑部分的用法不同。逻辑部分不能直接使用defineProps后的值。它需要将defineProps赋值给一个对象变量,传入的值以对象的属性的形式使用。注意如果value是ref标识的DOM,注意生命周期问题。模板部分可以直接使用defineProps后的值,但是需要注意的是,如果该值是ref标记的DOM,需要使用v-html方式或者动态组件方式正确引用,记得包含.outerHTML属性。注意:这里的reference不需要像child-to-father一样对标有ref的DOM进行封装。父母对孩子不同于孩子对父亲。parent-to-child的值先传递,child的DOM稍后更新。因此,当孩子更新DOM时,不会出现空洞现象,也不需要像儿子传给父亲那样用“function,computed,watch”包裹传递的值。5、单向绑定和可读因子只能读不能写父传过来的值,所以是单向绑定,子响应父的改变,子无权改变传递的值。如上所述,孩子要撒尿了。ioo赋值会跳出wee.ioo不可写警告。6、使用函数时,在defineProps后的函数类值后面加上()括号。使用时加()号。如果不是,那只是函数样式,不会运行函数,如上面的idd函数,不加()就不会运行函数。没有价值的emit监听事件感觉emit没有价值,因为props可以更简洁的实现emit的功能父组件:(){console.log('我是父事件')}子组件作为上面如何将事件从父级传递给子级分为三步:1、通过事件绑定命令将函数放在子组件标签中,将函数以子事件的形式传递给子级Put它在标签中。如下:"@CustomEventName="FunctionName"2、使用defineEmits([])注册子组件,然后在子组件中使用父传递的值。在使用父传递的值之前,需要向defineEmits([])注册,如下:defineEmits([Eventname])3.模板部分和逻辑部分的不同用法。以$emit参数的形式出现在()括号内,如下:"@事件名称="$emit('defineEmits'之后的值)"。注意defineEmits后面的值要写在括号里,并且要加单引号。逻辑部:defineEmits需要赋值给一个方法变量,传入的值以这个方法变量的参数形式使用。如下:constbodu=defineEmits(['wowo'])wobu('wowo')注意传入的值要加单引号,使用props代替emit上面emit函数代码使用props代替代码如下:父组件:子组件import{ref}from'vue'constwobu=defineProps(['wowo']。功能更直观简洁。下一节介绍在DOM父子传递时比Props更方便、更强大的工具:slot