前端培训丁鹿学堂：vue之动态组件，穿透传参和组件缓存

vue之动态组件

动态组件就是根据自己的定义来加载显示不同的组件。 关键词是 is

1. 引入多个组件
2. 在components中注册
3. <component :is="comContent"></component> 中占位显示

<div v-for="(item,index) in lessons" @click="comContent=item.component">{{item.title}}</div>
  <component :is="comContent"></component>
// ===========================================
import JsCom from "./components/JsCom.vue";
import VueCom from "./components/VueCom.vue";
import NodeCom from "./components/NodeCom.vue";
// ===========================================
    data(){
      return {
        lessons:[
          {title:'js',component:'JsCom'},
          {title:'vue',component:'VueCom'},
          {title:'node',component:'NodeCom'},
        ],
        comContent:''
      }
    },
    components:{
      JsCom,
      VueCom,
      NodeCom
    }

ue的provide和inject

如果多个组件嵌套，数据按照普通组件传值的方法（prop）会很繁琐，vue提供了组件穿透传值的api 使用：在祖先组件中用provide定义数据：

provide(){
   return {
     website:this.websiteName
   }
},
data(){
  return {
     websiteName:'baidu',
  }
},

在后代嵌套的子组件中使用inject接收

 <div>
    我是孙子组件 --- {{website}}
 </div>    
export default {
   inject:['website']
}

组件缓存keep-alive的使用

当我们使用动态组件的时候，如果组件切换了，会重新渲染，组件的input输入内容都会消失。 如果想缓存组件，可以使用keep-alive 包裹住要缓存的组件，则不会重新渲染。

  <keep-alive>
    <component :is="comContent"></component>
  </keep-alive>

vue通过ref操作组件

ref可以理解为给组件加了一个id，通过ref可以获取到组件，自然就能获得组件上的属性和方法。

1. 给某个子组件添加ref属性
2. 通过refs.xxx 获取

<Dbutton v-model:value="content" ref="btn"/> // Dbutton是一个子组件
  <div @click="getBtnContent"> 获取 Dbutton组件的方法</div>
// =====
    methods:{
     getBtnContent(){
      let value = this.$refs.btn.content
      console.log(value) // 这里就是Dbutton组件里的属性
     } 
    },