Vue 组件

创建组件

extend 方法

const component = Vue.extend({
  template："<h1>hello Vue</h1>", // 通过 template 属性指定了组件要展示的 html 结构
  data() {
    return { /* ... */ }
  },
  methods: { /* ... */ }
})

component 方法

• 会注册为全局组件

import Vue from 'vue'
import Component from './component'
Vue.component('myComponent', Component)
// 或者直接写 模板 不推荐
Vue.component('myComponent2', {
  template：'<h1>hello</h1>'
})

局部注册组件

<template>
  <my-component></my-component>
</template>

<script>
import MyComponent from './component'
export default {
  components: {
    MyComponent // 属于实例自身的组件
  }
}
</script>

动态组件

• Vue提供了<component>标签来展示对应名称的组件。<component>是一个占位符。:is属性可以用来设置展示组件的名称

<template>
  <component :is="component"></component>
</template>

<script>
import A from './A'
import B from './B'
export default {
  components: {
    A,
    B
  },
  data() {
    return {
      component: 'A'
    }
  }
}
</script>

extend 补充

• 使用extend创建组件构造函数

import Vue from 'vue'
import MyComponent from './myComponent'

// 通过extend创建一个构造对象
const Constructor = Vue.extend(MyComponent)

export default function showComponent(text: string) {
  // 创建一个组件实例
  const instance = new Constructor({
    // 可以不传 el 属性 通过instance.$mount(document.createELement("div")) 效果一样的
    el: document.createELement("div"),
    data() {
      return {
        text
      }
    }
  })
  // 将新的组件实例插入到body中
  document.body.appendChild(instance.$el)
  return () => instance.$el.parentNode.removeChild()
}

// 使用方法
const close = showComponent('Hello Vue')
// 关闭
close()