我是怎么学会vue的15:全局组件vs局部组件、父组件vs子组件

白话前端

全局组件vs局部组件

父组件vs子组件

父组件通过全局的方式注册。
子组件是在某个组件里面注册(不是在全局注册,也不是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>

【局部组件】和【子组件】的区别

局部组件是在Vue实例下面注册,子组件是在其他组件里面注册

阅读 921

100 声望
7 粉丝
0 条评论
100 声望
7 粉丝
文章目录
宣传栏