父传子 props
子能够通过defineExpose({})裸露要向父传递的变量、函数、DOM，父通过给子组件加ref属性，通过"ref值.value.子变量"语句来操作子传过来的变量、函数、DOM,且父子间的值是双向绑定的。
那么父怎么向子传递变量、函数、DOM:
1、统统放在子组件标签里
把要传给子的变量、函数、DOM或字符数字等,以子组件的属性模式放在标签里。如下:
<script setup>import HelloWor from './HelloWor.vue'import {ref} from 'vue'const wowo=ref('我是子组件的ref属性')const wo=ref('我是变量')function iio(){console.log('我是函数')}const wow=ref('我是DOM')</script><template> <button ref="wow" >草</button> <HelloWor ref="wowo" :ioo="wo" :idd="iio" :oj="wow" id="我是原生属性" ipp="我是字符" ip="8"/></template>留神:传递变量、函数、DOM时,要带响应绑定指令(v-bind)的模式。如是传递标签的原生属性或字符时,不须要v-bind指令.
2、在子组件内用defineProps([])先注册
子组件应用父传递的值前须要先用defineProps([])注册,如下:
<script setup>import {ref} from 'vue'const wee=defineProps(['ref','ioo','idd','oj','id','ipp','ip'])function wocao(){console.log(wee.ref,wee.ioo,wee.idd(),wee.oj,wee.id,wee.ipp,wee.ip)}</script><template> <button @click="wocao">测试</button> <div >{{ref}},{{ioo}},{{idd}},{{oj}},{{id}},{{ipp}},{{ip}}</div></template>留神写法:所要传进来的值放在[]中括号里.且值要加引号.
3、模板部与逻辑部的不同用法
在模板部间接应用defineProps后的值就行
逻辑部不能间接应用defineProps后的值,需将defineProps赋值给一个变量,传进来的值以这个变量的属性的模式来应用.
4、单向绑定与可读
因子对父传过来的值只可读不可写,所以是单向绑定,子响应父的扭转,子无权扭转传过来的值.
如上,子对wee.ioo赋值会跳出wee.ioo非可写正告.
5、函数的应用要加()括号
defineProps后的函数类值,应用时要加()号,不能的话只是个函数款式,不会运行函数,如上idd函数不加()不会运行函数.
2B的emit监听事件
今天再写