vue之动态组件

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

  1. 引入多个组件
  2. 在components中注册

  3. <component :is="comContent"></component> 中占位显示

    1. <div v-for="(item,index) in lessons" @click="comContent=item.component">{{item.title}}</div>
    2. <component :is="comContent"></component>
    3. // ===========================================
    4. import JsCom from "./components/JsCom.vue";
    5. import VueCom from "./components/VueCom.vue";
    6. import NodeCom from "./components/NodeCom.vue";
    7. // ===========================================
    8.  data(){
    9.    return {
    10.      lessons:[
    11.        {title:'js',component:'JsCom'},
    12.        {title:'vue',component:'VueCom'},
    13.        {title:'node',component:'NodeCom'},
    14.      ],
    15.      comContent:''
    16.    }
    17.  },
    18.  components:{
    19.    JsCom,
    20.    VueCom,
    21.    NodeCom
    22.  }

    ue的provide和inject

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

    1. provide(){
    2. return {
    3.   website:this.websiteName
    4. }
    5. },
    6. data(){
    7. return {
    8.   websiteName:'baidu',
    9. }
    10. },

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

    1. <div>
    2.  我是孙子组件 --- {{website}}
    3. </div>    
    4. export default {
    5. inject:['website']
    6. }

    组件缓存keep-alive的使用

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

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

    vue通过ref操作组件

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

  4. 给某个子组件添加ref属性

  5. 通过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组件里的属性
  } 
 },