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>

 

 

 祖后代传递数据      父亲用 provide   后代用 inject

• 作用：实现祖与后代组件间通信

• 套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

 祖先 : 

<template>
    <div>
      <h1>祖先组件 : {{fu.name}}</h1>
      <Home></Home>
    </div>
</template>

<script>
  import Home from './Home.vue'
    import { ref ,provide}    from 'vue'
    export default {
        name: 'App',
    components:{
      Home
    },
        setup() {
      let fu = ref({
        name:'我是祖先哦',
      })
      provide('fu',fu)

      return{
        fu
      }
        }
    }
</script>

 

儿子组件 : 

<template>
  <div class="home">
    <h2>子组件</h2>
    得到父组件传递的数据 : {{body.name}}
    <sun></sun>
  </div>
</template>

<script>

import sun from './sun.vue'
import {inject} from 'vue'
export default {
  components:{sun},
  name: "Home",
  setup(){
    // 得到父组件传递的数据
    let body = inject('fu')

    return {
      body
    }
  }
};
</script>

 

孙子组件 : 

<template>
    <div>
        <h3>孙组件</h3>
        得到父组件传递的数据 : {{sun.name}}
    </div>
</template>

<script>
import {inject} from 'vue'
export default {
    name: '',
    setup(){
        // 得到父组件传递的数据
        let sun = inject('fu')

        return {
            sun
        }
    }
};
</script>

<style lang="scss" scoped>

</style>