Vue.extend注册组件的用法

原创
05/30 14:34
阅读数 98

官网的介绍

  • 参数

    • {Object} options
  • 用法

    使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。

    data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数

    <div id="mount-point"></div>
    // 创建构造器
    var Profile = Vue.extend({
      template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
      data: function () {
        return {
          firstName: 'Walter',
          lastName: 'White',
          alias: 'Heisenberg'
        }
      }
    })
    // 创建 Profile 实例,并挂载到一个元素上。
    new Profile().$mount('#mount-point')
    
    
    
  • 结果如下:
    <p>Walter White aka Heisenberg</p>  // 会把id 为#mount-poin div替换掉

    实例
  • 先在main.js注册$vue 
  • import Vue from 'vue'
    Vue.prototype.$vue = Vue

     

  • <template>
    <div>
    <el-button @click="toggle('subExtend')">动态注册组件</el-button>
    <div ref="currentView"></div>
    </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
           
          };
        },
        methods: {
          toggle(componentName){
            this.registerComponent(componentName).then(Component=>{
              let instance = new Component({
                el:this.$refs.currentView,
                propsData:{pd:"pd"},
                data(){
                   return{
                     msg:"this is from pp"
                  }
                }
              })
              instance.$on("handleSubClick",item=>{
                console.log(item)
              })
            })
          },
          registerComponent(componentName){
            return import(`@/components/${componentName}.vue`).then(Component =>{
              return this.$vue.extend(Component.default)
            })
          }
          
        }
      }
    </script>

    子组件

  • <template>
    <div>
      <el-button @click="handleClick">传递数据</el-button>
       <div>{{msg}}</div>
       {{pd}}
    </div>   
    </template>
    <script>
    export default {
        name: 'Header',
        props: {
          "pd":String,
        },
        data(){
          return {
            msg:"this is sub",
          
          }
        },
        mounted(){
          console.log(this.msg)  
          console.log(this.pd)
        },
        methods:{
         handleClick(){
           this.$emit("handleSubClick","222")
         }
        }
    }
    </script>
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    
    </style>

    注意:通过Vue.extend生成的父组件如果传递数据到子组件要用propsData,子组件接收数据还是用props,如果父组件含有与子组件相同的data,如上面的msg,父组件的值会覆盖子组件.

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部