插槽+组件应用

我是大苹果1212

已于 2022-02-11 10:29:55 修改

阅读量482

点赞数 2

文章标签： vue

于 2022-02-11 10:15:39 首次发布

本文链接：https://blog.csdn.net/qq_47666300/article/details/122874587

版权

本文通过三个情况详细介绍了Vue.js中父子组件的数据传递以及插槽的使用。情况一展示了如何将数据从父组件传给子组件并显示。情况二探讨了当子组件插槽有内容时，如何影响父组件内容的显示。情况三则讲解了具名插槽的用法，展示了如何在子组件中定义多个插槽并由父组件填充内容。

摘要由CSDN通过智能技术生成

情况一

创建父页面main.vue和子页面list1.vue ，父页面中如下

<template>
  <div>
      <listA :data_child_A='data_parent_A'>
        <button>按钮1</button>
      </listA>
      <listA :data_child_A='data_parent_A'>
        <button>按钮2</button>
      </listA>
  </div>

</template>

<script>
import listA from '../components/list1.vue'
export default {
  data(){
    return{
    }
  },
  methods:{
  },
  components:{
    listA,
    listB,
  }
}
</script>

<style>

</style>

子页面中

<template>
  <div>
    <div>{{data_child_A}}</div>
    <!-- <button>我是按钮</button> -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  props:{
    data_child_A:Array
  }
}
</script>

<style>

</style>

结果

情况二（如果子页面插槽中不为空，则父页面中显示子页面的标签不为空就显示父页面中的，为空就显示子页面中的内容）

父页面

<template>
  <div>
      <listA :data_child_A='data_parent_A'>
        <button>按钮1</button>
      </listA>
      <listA :data_child_A='data_parent_A'>
        <button>按钮2</button>
      </listA>
      <listA :data_child_A='data_parent_A'>
      </listA>
      <listA :data_child_A='data_parent_A'>
      </listA>
  </div>

</template>

<script>
import listA from '../components/list1.vue'
export default {
  data(){
    return{
    }
  },
  methods:{
  },
  components:{
    listA,
    listB,
  }
}
</script>

<style>

</style>

子页面中

<template>
  <div>
    <div>{{data_child_A}}</div>
    <!-- <button>我是按钮</button> -->
    <slot><button>我是组件中的按钮</button></slot>
  </div>
</template>

<script>
export default {
  props:{
    data_child_A:Array
  }
}
</script>

<style>

</style>

显示

情况三（具名插槽）给插槽分别命名，在父页面使用组件标签时候，改变其中一个

父页面中

<template>
  <div>

      <listA :data_child_A='data_parent_A'>
      </listA>
  </div>

</template>

<script>
import listA from '../components/list1.vue'
export default {
  data(){
    return{
    }
  },
  methods:{
  },
  components:{
    listA,
    listB,
  }
}
</script>

<style>

</style>

子页面中

<template>
  <div>
    <div>{{data_child_A}}</div>
    <!-- <button>我是按钮</button> -->
    <slot name='left'><button>左边</button></slot>
    <slot name='center'><button>中间</button></slot>
    <slot name='right'><button>右边</button></slot>
  </div>
</template>

<script>
export default {
  props:{
    data_child_A:Array
  }
}
</script>

<style>

</style>

显示

我是大苹果1212

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
插槽+组件应用

情况一创建父页面main.vue和子页面list1.vue ，父页面中如下<template> <div> <listA :data_child_A='data_parent_A'> <button>按钮1</button> </listA> <listA :data_child_A='data_parent_A'> <button>
复制链接

扫一扫