H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】我是怎么学会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实例下面注册,子组件是在其他组件里面注册

本文地址:H5W3 » 【前端技术】我是怎么学会vue的15:全局组件vs局部组件、父组件vs子组件

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址