组件

使用思想：构造  --> 注册 -->  使用

构造：

const cpn = Vue.extend({
   template : `<div> <p>这是一个组件</p> </div>` 
})

注册：

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

使用时  直接在需要使用的地方调用<my-cpn></my-cpn>即可

 

语法糖：

Vue.component('my-cpn', {
  template : `<div> <p>这是一个组件</p> </div>`
} )   //实质上还是调用Vue.extend()

 

但即便这么写，还是麻烦，因为template里面很有可能是大段的模板，还要加样式一类的，所以要进行模板抽离

这就用到了<template>标签

这时候，可以这么写

<template id="cpn">
     <div> <p>这是一个组件</p> </div> 
</template>

<script>
     Vue.component('my-cpn', {
    template : '#cpn'
})
</script>

组件不可以访问vue实例中的内容，如果直接访问实例内容，会报以下的错

 

 所以在组件中，data应为一个可返回instance的function，即写为 data(){return { instance : xxx} }