24. Vue 的 父组件和子组件

父组件和子组件

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

1.组件和组件之间存在层级关系

2.而其中一种非常重要的关系就是父子组件的关系

 

直接上代码 然后分析：

 

<div id="app">
<p-a></p-a>
</div>

<script src="js/vue.js"></script>
<script>

  //创建一个组件【这里充当子组件】
  const child = Vue.extend({
    template:`
       <div>
           我是child的组件
        </div>
    `
  })

  //创建一个组件【这里充当父组件】
  const parent = Vue.extend({
    template:`
       <div>
           我是parent的组件
       <p-b></p-b>
        </div>
    `,
    components:{
      'p-b':child   //这里相当于绑定了局部组件
    }
  })

  //其实可以吧  //其实可以吧 app 看做一个 root【根组件】
  const app = new Vue({
    el:"#app",
    components:{
      'p-a':parent
    }
  })
</script>

因为当子组件注册到父组件的components时，Vue会编 译好父组件的模块 所以呢 创建组件时候 内个位置要严格，一值没效果就是位置导致

 

<p-b></p-b> 只能在 父组件中使用（识别） 相当于绑定了这个局部组件

 

还有就是 绑定局部组件是用 components  s 别少了！！！！

 

 

这就是 子组件 和 父组件 。其实还有更简洁的方法...