vue.js的组件之父子组件

父子组件的区别

  <div id="app">
    <cpn2></cpn2>
  </div>
  <script>
  //构造子组件
    const cons1 = Vue.extend({
      template: '<div><h2>我是子组件</h2></div>'
    })
     //构造父组件
    const cons2 = Vue.extend({
	    template: `
        <div>
          <h2>我是父组件</h2>
          <cpn1></cpn1>
        </div>`,
      // 注册子组件
      components: {
	      cpn1: cons1
      }
    })
    //全局注册父组件cpn2
    Vue.component('cpn2',cons2)
  	const app = new Vue({
  		el: '#app',
  		data: {
  			msg: '欢迎使用Vue.js'
  		}
  	})
  </script>