vue前端开发自学,插槽练习,同时渲染父子组件的数据信息

vue前端开发自学,插槽练习,同时渲染父子组件的数据信息！

如果想在slot插槽出口里面，同时渲染出来，来自父组件的数据，和子组件自身的数据呢。又有点绕口了。vue官方给的解决办法是。需要借助于，父组件的自定义属性。

<template>
  <h3>App</h3>
  <!-- <SlotBase>

    <div>
      <h3>标题</h3>
      <p>内容</p>
    </div>
  </SlotBase> -->
  <!-- <SlotTwo>
    <template v-slot:header>
      <h3>我是动态数据,{{message}}</h3>
    </template>
    <template v-slot:main>
      <h4>我是静态内容来自插槽002</h4>
    </template>
  </SlotTwo> -->
<SlotThr>

  <template #header="slotProps" >
    <h3>{{currentTest}}--{{ slotProps.msg }}</h3>
  </template>
  <hr>
  <template #main="slotProps">
    <p>{{ slotProps.job }}</p>
  </template>

</SlotThr>
</template>
<script>
import SlotBase from './components/SlotBase.vue'
import SlotTwo from "./components/SlotTwo.vue"
import SlotThr from './components/SlotThr.vue'
export default{
  data(){
    return {
      message:"插槽内容002",
      currentTest:"父组件内容信息"
    }
  },
  components:{
    SlotBase,
    SlotTwo,
    SlotThr
  }
}
</script>

如图，这是父组件里面，我们定义了2个具名的插槽内容。准备将来让它们都在子组件里渲染出来。里面可以看到。我们加入了自定义属性。【slotProps】。这个东西，就是接收数据用的。它可以接收到来自子组件传递过来的数据信息。

<template>
    <h3>插槽数据的交互练习</h3>
    <slot name="header" :msg="childMsg"></slot>
    <slot name="main" :job="jobMsg"></slot>
</template>
<script>
    export default{
        data(){
            return {
                childMsg:"子组件数据",
                jobMsg:"admin管理员"
            }
        }
    }
</script>

如图，这个就是子组件的内容了。很明显。里面绑定了自定义属性。第一个插槽里叫msg；第二个插槽里叫job。这2个自定义属性，会被传递到父组件里面对应的各自的Props里面去。它是一个对象，直接使用点操作，就能点出来。代码写的很清楚。