setup中的props和context

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>

const xxx = (txt:string) => {
    
  msg.value += txt
}
return {
    
  msg,
  xxx
}

子组件

<button @click="emitxxx">分发事件</button>

const emitxxx = () => {
    
  //xxx----父组件中的方法
  //'2123'---要给父组件传递的参数
  context.emit('xxx','2123')
}
return {
    
  emitxxx,
}

具体流程：