setup的两个传值

2022-05-17 15:04:00 阅读：310 来源： 互联网

标签：两个 setup HelloWorld attrs context props 组件传值

setup执行的时机
- 在beforeCreate之前执行一次，this是undefined。
setup的参数
- props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
- context：上下文对象

父组件 :

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

setup的两个传值