vue注册组件语法糖

注册组件语法糖

作用：省去了调用Vue.extend()的步骤，直接使用一个对象来代替，简化代码。

注册全局组件未使用语法糖

// 注册全局组件未使用语法糖
const myComponent = Vue.extend({
    template: `
		<div>
			<p>注册全局组件</p>
		</div>
	`
})

Vue.component('my-cpn',myComponent )

注册全局组件的语法糖

// 注册全局组件的语法糖
Vue.componrnt( 'my-cpn', {
    template: `
		<div>
			<p>注册全局组件的语法糖</p>
		</div>
	`
})

注册局部组件未使用语法糖

// 注册局部组件未使用语法糖
const myComponent = Vue.extend({
    template: `
		<div>
			<p>注册全局组件</p>
		</div>
	`
})

let app1 = new Vue({
    el: '#app1',
    components: {
        'my-cpn': myComponent
    }
})

注册局部组件的语法糖

// 注册局部组件的语法糖
const app = new Vue({
      el: '#app',
      components: {
        'my-cpn': {
          template: `
            <div>
              <p>注册局部组件的语法糖</p>
            </div>
          `
        }
      }
    })