共计 1221 个字符，预计需要花费 4 分钟才能阅读完成。
父传子 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 监听事件
今天再写