vue.js的组件的基本使用

全局组件和局部组件

<div id="app">
    <!--第三：使用组件-->
    <cpn></cpn>
  </div>

  <div id="app2">
    <!--第三：使用组件-->
    <cpn></cpn>
  </div>

  <script>
    // 第一：创建构造器对象
    const construct = Vue.extend({
      template: '<div><h2>你好，我好，他好</h2></div>',
    })
    // 第二：注册组件（全局组件）
    // Vue.component('my-cop',construct)

  	const app = new Vue({
  		el: '#app',
  		data: {
  			msg: '欢迎使用Vue.js'
  		},
      // 局部注册组件，只在当前Vue实例里面使用
      components: {
  			cpn: construct
      }
  	})

    const app2 = new Vue({
	    el: '#app2',
	    data: {
		    msg: '欢迎使用Vue.js'
	    }
    })
  </script>

1.使用Vue.component()注册全局组件时，如果有多个vue实例，使用这个构件的组件标签，都能访问里面的内容。

2.在某实例里面的components属性中注册局部组件，该组件只能在这个vue实例里面使用这个组件。

Vue为了简化注册组件的过程，使用了注册组件语法糖。

第一种：全局注册组件时：

<div id="app">
    <!--第三：使用组件-->
    <cpn></cpn>
  </div>
  <script>
    // 第一种全局注册组件的语法糖，直接把component的第二个参数为组件的html模板对象
    Vue.component('cpn',{
	    template: '<div><h2>你好，我好，他好</h2></div>'
    })

  	const app = new Vue({
  		el: '#app',
  		data: {
  			msg: '欢迎使用Vue.js'
  		}
  	})
  </script>

第二种：局部注册组件时：

  <div id="app">
    <cpn></cpn>
  </div>
  <script>
  	const app = new Vue({
  		el: '#app',
  		data: {
  			msg: '欢迎使用Vue.js'
  		},
	 // 第二种局部注册组件的语法糖，直接用对象代替。
      components: {
        cpn: {
	        template: '<div><h2>你好，我好，他好</h2></div>'
        }
      }
  	})
  </script>