1、子组件中:接收父组件传来的值、插槽的定义、触发emit
import { defineComponent } from "vue";
export default defineComponent({
//接收父亲传来的值
props:{
name:String,
age:Number
},
emits:["on-click"],
setup(props,{emit,slots}){
const fn = ()=>{
// 传值给父亲
emit("on-click","我是从儿子中传过来的")
}
return ()=>(
<>
<div>
名字: {props?.name}
</div>
<div>
年龄:{props?.age}
</div>
<hr />
{/* 默认插槽 */}
<div >
{
slots.default?slots.default():"默认插槽"
}
</div>
<hr />
{/* 具名插槽 */}
<div>
{
slots.yao?slots.yao():"具名插槽"
}
</div>
{/* 作用域插槽 */}
<hr />
<div>
{
slots.scope?slots.scope("作用域"):"作用域插槽"
}
</div>
<button onClick={()=>fn()}>传值</button>
</>
)
}
})
2、父组件中:给子组件传值、接收子组件的自定义事件
import { defineComponent,ref } from "vue";
import A from "./components/aaa"
export default defineComponent({
setup(){
let v:string = ref("")
const fn = (e)=>{
v.value = e
}
return ()=>(
<>
{/* 自定义的事件名 */}
<A onOn-click={(e)=>fn(e)} name="你爹" age={41}>
{{
// 默认插槽
default:()=>(
<>
<div>默认插槽</div>
<div>陈世贤</div>
<div>女</div>
<div>21</div>
</>
),
// 具名插槽
yao:()=>{
return(<>
<div>具名插槽</div>
<div>陈福龙</div>
<div>男</div>
<div>21</div>
</>)
},
// 作用域插槽
scope:(scope)=>(
<>
<div>作用域插槽</div>
<div>
子组件传来的值 : {scope}
</div>
</>
)
}}
</A>
<div>{v.value}</div>
</>
)
}
})