setup的两个传值

• setup执行的时机

  • 在beforeCreate之前执行一次，this是undefined。

• setup的参数

  • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。

  • context：上下文对象

  • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。

  • slots: 收到的插槽内容, 相当于 this.$slots。

  • emit: 分发自定义事件的函数, 相当于 this.$emit。

父组件  :

<template>
  <div class="about">
      <h1>about页面</h1>
      <hr>
      <h2>HelloWorld组件的信息 : (父页面写的)</h2>
      <HelloWorld msg="吴宇腾" abc="年后哦" @hello="change">
        <div>匿名插槽</div>

        <template v-slot:x>
          <div>
             具名插槽
          </div>
        </template>

      </HelloWorld>
    
  </div>
</template>
<script>
import HelloWorld from '../components/HelloWorld.vue'
import { reactive, ref ,computed,watch ,watchEffect} from 'vue'
export default {
  components:{HelloWorld},
  setup(){ 
    // 获取子组件的数据 
    let change = (n)=>{
      console.log('父组件接受 :', n)
    }
    return {change}
  }
}
</script>

 

子组件

<template>
  <div class="hello">
    <h1>HelloWorld组件(字页面写的)</h1>
    父亲传递的参数 : {{msg}}
    
    <slot name="x"></slot>

    <button @click="btn">把数据发给父亲</button>

    <slot ></slot>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props:['msg'],
  setup(props,context){
    // setup的第一个参数,接受父亲传递过来的信息
    console.log(props.msg)

    // setup的第二个参数,上下文的意思
    console.log(context);

    // setup第二个参数context : 第一个值 : attrs [没有通过props接受的都在attrs里面]
    console.log(context.attrs.abc);

    // setup第二个参数context : 第二个值 : emit [子传递给父亲]
    let num = 1111
    let btn = ()=>{
      context.emit('hello',`子组件的数据:${num}`)
    }
    // setup第二个参数context : 第二个值 : slots [插槽]
    
    return {btn,num}
  }
};
</script>

 

                                       

标签：两个,setup,HelloWorld,attrs,context,props,组件,传值
来源： https://www.cnblogs.com/qd-lbxx/p/16280795.html