vue 插槽作用域插槽控制同一子组件视图不同-蒲公英云

vue 插槽作用域插槽控制同一子组件视图不同

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70

爷爷组件.vue

//父组件传值，控制相同子组件内部不同变化
<template>
  <div id="app">
    <!-- son组件 -->
    <son :show="false">
       <span slot="header">我是子组件header</span>
       <!-- 父元素自定义接收的 getValue 名 -->
       <p slot-scope="getValue">{
   {getValue.value}} {
   {getValue.value2}}</p>
    </son>
    <!-- son组件 -->
    <son :show="true" :text=text  @handleClick='handleClick'>
      <span slot="body">我是子组件body</span>
    </son>
  </div>
</template>
<script>
import son from './son.vue'
export default {
  //祖先给后代传值 祖辈使用provide函数定义值 但是当父组件传的值改变时 子孙组件的值不会同步改变
  //要同步改变需要用到Object.defineProperty 但vue官方不推荐这么用 vue升级可能会报错 
  provide(){
    const data={}
    Object.defineProperty(data,'text',{
      get:()=>this.text,
      enumerable:true
    })
    return{
         yeye:this,
         data
    }
  },
  components:{
      son
  },
  data(){
      return{
        text:12
      }
  },
  methods:{
    //父元素接收子元素的点击事件 修改逻辑
    handleClick(){
      this.text= this.text+1
    }
  }
}
</script>
<style lang='less' scoped>
</style>

子组件.vue

//子组件
<template>
  <div id="app">
    <p style="color:red;">我是同一子组件</p>
    <p v-show='show' @click="handleClick" style="font-size:20px;font-weight:600">点击我,父组件传值++{
   {text}}</p>
    <div :style=style>
      <slot name='header'></slot>
      <slot name='body' ></slot>
      <!-- 自定义value传递给父元素 -->
      <slot value="作用域插槽的值1" value2='作用域插槽的值2'></slot>
      <div>
         <!-- 孙子组件 -->
        <grandson></grandson>
      </div>
    </div>
  </div>
</template>
<script>
import grandson from './grandson.vue'
export default {
  components:{
    grandson
  },
  props:{
      show:Boolean,
      text:Number,
  },
  data(){
      return{
        //子节点最好不要修改父节点直接传进来的props值 例如:this.show=xxx  如果要修改 传事件给父元素
        style:{
          width:"200px",
          height:"200px",
          border:'1px solid #aaa'
        }
      }
  },
  methods:{
    //告诉父元素我被点击了
    handleClick(){
      this.$emit('handleClick')
    }
  }
}
</script>
<style lang='less' scoped>
#app{
  margin-left:30px;
}
</style>

孙子组件.vue

//孙子组件
<template>
  <div id="app">
      <p>我负责展示爷爷的值{
   {data.text}}</p>
  </div>
</template>
<script>
export default {
//祖先传值 孙辈用inject接收祖先传来的值
  inject:['yeye','data'],
  mounted(){
    // console.log(this.yeye)
  }
}
</script>
<style lang='less' scoped>
.text1{
    background: #ccc;
}
</style>