props的使用:用于父子组件向子级组件传送数据
(1)在子级标签中写入要传送的数据
<child:msg="msg" mdf="123"></child>
(2)子级组件接收
props:['msg','mdf'],
(3)使用,直接使用即可
<h3>msg:{{msg}}{{mdf}}</h3>
如下图所示:
context的使用
context参数,是一个对象,里面有
(1) attrs对象:获取当前组件标签上的所有属性,与props的区别:
props在使用的时候,有个注册的过程,但是如果有的数据没有注册,依然可以通过context.attrs访问到
例如:
父组件:
<child:msg="msg" mdf="123"></child>
子组件:我只接受了一个msg,mdf没有接收
props:['msg'],
我怎么拿到mdf这个东西呢?这个时候可以通过context.attrs
setup(props,context){
console.log(context.attrs.mdf)}
输出如下:
(2)emit方法:
emit是用来分发事件的,分发事件的目的是通过在子组件元素上绑定事件,来触发父组件中的事件,来改变父组件的数据。
用法:
父组件:真正的改变数据的方法
//@xxx="xxx"---通过emit<child:msg="msg" mdf="123" @xxx="xxx"></child>constxxx=(txt:string)=>{
msg.value+= txt}return{
msg,
xxx}
子组件
<button @click="emitxxx">分发事件</button>constemitxxx=()=>{//xxx----父组件中的方法//'2123'---要给父组件传递的参数
context.emit('xxx','2123')}return{
emitxxx,}
具体流程: