vue13——组件化: 基本使用

使用组件：

1. 创建组件构造器：调用 Vue.extend() 方法 （后续会学习其他创建方法）
2. 注册组件：调用 Vue.component() 方法
3. 使用组件：在Vue示例的作用范围内使用组件

1必须写在 ‘new Vue()’ 之前;
1中的模板必须用一个大的根标签包裹

1. 创建组件构造器对象

参数为一个对象，属性template为模板

    const cpnC = Vue.extend({
      template: `
        <div>
          <h2>vue 组件化开发</h2>
          <p>1. 创建组件构造器对象：Vue.extend({template: ...})</p>
          <p>2. 注册组件：Vue.component(组件标签名,组件构造器)</p>
          <p>3. 在vue示例作用范围内使用</p>
        </div>
      `
    })

2. 注册组件

参数为 组件标签名 和 组件构造器

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

3. 使用组件

  <div id = "app">
    <my-cpn></my-cpn>
    <my-cpn></my-cpn>
  </div>
 <script>
  // 步骤1，2...
  
  	const app = new Vue({
      	el: '#app'  	
    })
  </script>

全局组件，局部组件

全局组件：
注册组件 写在new Vue（） 之前的是全局组件。
该组件可以在所有vue示例中使用。
如上例。

局部组件：
注册组件写在某个new Vue（）里面
该组件只能在 注册它的 vue示例(id=‘app2’) 里使用

	const app =  new Vue({
	    el: "#app2",
		data: ...,
		...,
		components: {
			myCpn: cpnC
		}
	})