VUE(9)--组件slot属性和组件动态绑定

最新推荐文章于 2024-11-09 22:59:03 发布

原创最新推荐文章于 2024-11-09 22:59:03 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍Vue中子组件如何通过slot属性与父组件交互，动态插入DOM元素，以及父组件如何通过动态绑定is属性实现组件的动态切换，增强页面灵活性。

1. 子组件的slot属性

子组件中设置slot其实就是为父组件动态添加dom元素做准备，不可能所有组件都是一尘不变。

子组件定义slot标签并且添加属性name

<template>
<div>
这是一个组件 
<slot name="001"></slot> 
<slot name="002"></slot> 
</div>
</template>
<script>
//子组件定义slot标签并且添加属性name
export default {
name: 'zujian01', 
}
</script>

父组件的应用

<template> 
<!--这里的button就对应在组件slot的位置-->
<zujian01>
 <button slot="001">对应001的位置</button>
 <button slot="002">对应002的位置</button>
</zujian01> 
</template>

2. 组件的动态绑定 <compnent is="name"></component>

父组件：动态绑定is属性的值从而实现动态绑定组件的效果

<template>
  <div class="hello">
   <div>登录页面</div> 
   <el-radio-group v-model="currentTab">
     <el-radio-button label="zujian01">1</el-radio-button>
     <el-radio-button label="zujian02">2</el-radio-button>
     <el-radio-button label="zujian03">3</el-radio-button>
   </el-radio-group> 
  <!--动态绑定is属性的值从而实现动态绑定组件的效果-->
   <component :is="currentTab"></component> 
  </div>
</template>

<script>
import zujian01 from './zujian01.vue'
import zujian02 from './zujian02.vue'
import zujian03 from './zujian03.vue'
export default {
  name: 'HelloWorld',
  components:{zujian01,zujian02,zujian03},
  data () {
    return {
      currentTab:"zujian01"
    }
  } 
}
</script>