十六、父组件和子组件

在前面我们看到了组件树:

• 组件和组件之间存在层级关系
• 而其中一种非常重要的关系就是父子组件的关系

我们来看通过代码如何组成的这种层级关系:

父子组件错误用法：以子标签的形式在Vue实例中使用

• 因为当子组件注册到父组件的components时,Vue会编译好父组件的模块
• 该模板的内容已经决定了父组件将要演染的HTML(相当于父组件中已经有了子组件中的内容了)
• <child-cpn></child-cpn>是只能在父组件中被识别的。
• 类似这种用法,<child-cpn></child-cpn>是会被浏览器忽略的。 

    <div id="app">
      <cpn2></cpn2>
    </div>
    <script>
      //1.创建第一个组件构造器（子组件）
      const cpnC1 = Vue.extend({
        template:`
          <div>
            <h2>我是标题1</h2>
            <p>我是内容，哈哈哈</p>
          </div>`
      });
      //2.创建第二个组件构造器（父组件）
      const cpnC2 = Vue.extend({
        template:`
          <div>
            <h2>我是标题2</h2>
            <p>我是内容，呵呵呵</p>
            <cpn1></cpn1>
          </div>`,
        components: {
          cpn1: cpnC1
        }
      });

      //root组件
      const app = new Vue({
        el: "#app",
        data: {
        },
        components: {
          cpn2 : cpnC2
        }
      });
    </script>