vue创建组件的三种形式

vue创建组件的三种方法

1.直接导入vue文件

// 1.导入vue文件
import Demo from './Demo.vue'
// 2.注册组件并使用
new Vue({ 
 components: { FirstDemo: Demo }
  data: {
    n: 0
  }, // 实例中的data可以是一个对象,但推荐使用函数
  template: `
  <div class="demo">
    <span>{{ n }}</span>
    <button @click="add">+1</button>
    <hr />
    <FirstDemo />
  </div>
  `,
  methods: {
    add() {
      this.n += 1
    }
  }
})
vm.$mount('#first-demo')

2.创建全局组件

// 1.创建全局组件
Vue.component(
  'SecondDemo', {
  template: `
  <div>这是第二种组件的形式</div>
  `
})
// 2.使用组件
new Vue({ 
  data: {
    return {
        n:0
    }
  }, // 实例中的data可以是一个对象,但推荐使用函数
  template: `
  <div class="demo">
    <span>{{ n }}</span>
    <button @click="add">+1</button>
    <hr />
    <SecondDemo />
  </div>
  `,
  methods: {
    add() {
      this.n += 1
    }
  }
}).$mount('#first-demo')

3.在实例中或者组件中直接创建

import Demo from './Demo.vue'
new Vue({ 
    components: {
        FirstDemo: Demo,
        ThirdDemo: {
          data() {
            return {
              message: '这是创建组件的第三种形式'
            }
          },
          template: `<div>{{message}}</div>`,
          methods: {}
        }
      },
  data: {
    return {
        n:0
    }
  }, // 实例中的data可以是一个对象,但推荐使用函数
  template: `
  <div class="demo">
    <span>{{ n }}</span>
    <button @click="add">+1</button>
    <hr />
    <ThirdDemo />
  </div>
  `,
  methods: {
    add() {
      this.n += 1
    }
  }
}).$mount('#first-demo')