我是怎么学会vue的11:父组件和子组件

父组件经过全局的方式注册。
子组件是在某个组件里面注册(不是在全局注册,也不是Vue实例下面注册)。html

局部组件 和 子组件 的区别:
局部组件是在Vue实例下面注册,子组件是在其余组件里面注册

代码演示:vue

<div id="app">
  <cpn2></cpn2>
  <!--<cpn1></cpn1>-->
</div>

<script src="../js/vue.js"></script>
<script>
  // 1.建立第一个组件构造器(子组件)
  const cpnC1 = Vue.extend({
    template: `
      <div>
        <h2>我是子组件</h2>
        <p>我是内容</p>
      </div>
    `
  })

  // 2.建立第二个组件构造器(父组件)
  const cpnC2 = Vue.extend({
    template: `
      <div>
        <h2>我是父组件</h2>
        <p>我是内容</p>
        <!--使用子组件-->
        <cpn1></cpn1>
      </div>
    `,
    components: {
      //子组件cpn1注册在其余组件里面
      cpn1: cpnC1
    }
  })

  const app = new Vue({
    el: '#app',
    components: {
      cpn2: cpnC2
    }
  })
</script>
相关文章
相关标签/搜索