Vue_父组件和子组件的基本使用

---

---

---

1. Vue 53 >> 61（父子组件）

   [^使用 Vue 父子组件]:

Vue 父子组件

P53 组件的基本使用

创建组件构造对象

const cpnC = Vue.extend({
   template: `
   <div>
      <h2>Vue组件化的基本使用</h2>
   </div>
   `
})

注册组件

Vue.component('my-cpn',cpnC)

组件的使用

<div id="app">
   <my-cpn>
</div>

高复用性，组件可以在多个项目中使用

---

P53全局组件和局部组件

全局组件: Vue.extend 注册的组件都为全局组件

局部组件:

      const app = new Vue({
         el: '#app',
         data: {

         },
         components: {
            cpn: cpnC
         },

在相应的 Vue 实例对象中注册组件，该组件则只对该实例对象起作用

---

P54父组件和子组件的区别

    const cpnC1 = Vue.extend({
        template: `
        <div>
            <h2>注册内容一</h2>    
        </div>
        `
    })

注册两个组件

    const cpnC1 = Vue.extend({
        template: `
        <div>
            <h2>注册内容一</h2>    
        </div>
        `
    })

    const cpnC2 = Vue.extend({
        template: `
        <div>
            <h2>注册内容二</h2>
            <cpn1