Vue.js——关于组件(八）

淩亂°似流年 2022-11-19 11:28 145阅读 0赞

# 组件化的实现和使用步骤 #

## 什么是组件化？ ##

*  人面对复杂问题的处理方式：
    
     *  任何一个人处理信息的逻辑能力都是有限的。
     *  所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆内容。
     *  但是，我们人有一种天生的能力，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现问题也会迎刃而解。
 *  **组件化**也是类似的思想：
    
     *  如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
     *  但如果，我们将**一个页面拆分成一个个小的功能块**，每个功能块完成属于自己这部分独立的功能，那么，之后整个页面的管理和维护就会变得非常容易了。

## Vue的组件化思想 ##

*  组件化是Vue.js中的重要思想
    
     *  它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
     *  任何的应用都会被抽象成一颗组件数。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PnlLl4Ru-1609768401766)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记八/1.png)\]][img-PnlLl4Ru-1609768401766_Users_mac_Desktop_vue_vue_1.png]

*  **例如**，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
 *  组件化思想的**应用**：
    
     *  有了组件化的思想，我们在之后的开发中就要充分的利用它。
     *  尽可能的将页面拆分成一个个小的、可复用的组件。
     *  这样让我们的代码更加方便组织和管理，并且扩展性也很强。

## 注册组件的基本步骤 ##

*  组件的使用分成**三个步骤**：
    
     *  调用`Vue.extend()`方法**创建组件构造器**。
     *  调用`Vue.component()`方法**注册组件**。
     *  在Vue实例的作用范围内**使用组件**。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>01-组件化的基本使用</title>
    </head>
    <body>
      <div id="app">
        
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
      </div>
    
      <script src="../js/vue.js"></script>
      <script>
    
        // 1.创建组件构造器对象
        const cpnConstructor = Vue.extend({
          template: 
            `
              <div>
                <h2>我是标题</h2>
                <p>我是内容，哈哈哈哈哈</p>
                <p>我是内容，嘿嘿嘿嘿嘿</p>
              </div>
            `
        });
        // 2.注册组件
        Vue.component('my-cpn', cpnConstructor);
    
    
        const app = new Vue({
          el: '#app',
          data: {
    
          }
        });
      </script>
    </body>
    </html>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t09Jc4LZ-1609768401770)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记八/2.jpg)\]][img-t09Jc4LZ-1609768401770_Users_mac_Desktop_vue_vue_2.jpg]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KANDXa1J-1609768401775)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记八/3.jpg)\]][img-KANDXa1J-1609768401775_Users_mac_Desktop_vue_vue_3.jpg]

### 注册组件步骤解析 ###

*  这里的步骤都代表什么含义呢？
 *  `Vue.extend()`：
    
     *  调用`Vue.extend()`创建的是一个组件的构造器。
     *  通常在创建组件构造器时，传入**template**代表我们自定义组件的模板。
 *  `Vue.component()`：
    
     *  调用`Vue.compoment()`是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
     *  所需要传递两个参数：1、注册组件的标签名。2、组件构造器。
 *  组件必须**挂载在某个Vue实例**下，否则不会生效，如图：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y6fLFHQ3-1609768401785)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记八/4.jpg)\]][img-Y6fLFHQ3-1609768401785_Users_mac_Desktop_vue_vue_4.jpg]

# 全局组件和局部组件 #

首先，我们上面写的组件就是全局组件，可以在不同的Vue实例中使用，下面来说一下**局部组件**：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>01-组件化的基本使用</title>
    </head>
    <body>
      <div id="app">
        
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
      </div>
    
      <div id="app2">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
      </div>
    
      <script src="../js/vue.js"></script>
      <script>
    
        // 1.创建组件构造器对象
        const cpnConstructor = Vue.extend({
          template: 
            `
              <div>
                <h2>我是标题</h2>
                <p>我是内容，哈哈哈哈哈</p>
                <p>我是内容，嘿嘿嘿嘿嘿</p>
              </div>
            `
        });
        // 2.注册组件(全局组件，意味着可以在多个Vue的实例下面使用)
        Vue.component('my-cpn', cpnConstructor);
    
    
        const app = new Vue({
          el: '#app',
          data: {
    
          },
          components: {
            // my-cpn使用组件时的标签名
            cpn: cpnConstructor,
          }
        });
        const app2 = new Vue({
          el: '#app2',
          data: {
    
          }
        });
      </script>
    </body>
    </html>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tur42Aib-1609768401789)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记八/5.jpg)\]][img-Tur42Aib-1609768401789_Users_mac_Desktop_vue_vue_5.jpg]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h4sMsJuy-1609768401790)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记八/6.jpg)\]][img-h4sMsJuy-1609768401790_Users_mac_Desktop_vue_vue_6.jpg]

# 父组件和子组件 #

*  在前面我们看到了组件树：
    
     *  组件和组件之间存在层级关系。
     *  而其中一种非常重要的关系就是父子组件的关系。
 *  父子组件的**错误用法**：以子标签的形式在Vue实例中使用。
    
     *  因为当子组件注册到父组件的components时，Vue会编译好父组件的模块。
     *  该模块的内容已经决定了父组件将要渲染的HTML（相当于父组件中已经有了子组件）

看如下案例：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>03-父组件和子组件</title>
    </head>
    <body>
      <div id="app">
        <cpn2></cpn2>
      </div>
    
      <script src="../js/vue.js"></script>
      <script>
    
        // 创建组件构造函数（子组件）
        const cpnConstructor1 = Vue.extend({
          template:`
            <div>
              <h2>我是子组件标题</h2>  
              <p>子组件子组件子组件</p>
            </div>
          `
        });
    
        // 创建组件构造函数（父组件）
        const cpnConstructor2 = Vue.extend({
          template:`
            <div>
              <h2>我是父组件标题</h2>  
              <p>父组件父组件父组件</p>
              <cpn1></cpn1>
            </div>
          `,
          components: {
            cpn1: cpnConstructor1,
          }
        });
    
        const app = new Vue({
          el: '#app',
          data: {
    
          },
          components: {
            cpn2: cpnConstructor2,
          }
        });
    
      </script>
    </body>
    </html>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qyp5XZjc-1609768401792)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记八/7.jpg)\]][img-Qyp5XZjc-1609768401792_Users_mac_Desktop_vue_vue_7.jpg]

我们在父组件的模板中注册并使用而子组件，并且在vue挂载中注册了父组件，所以可以使用父组件，但是没有在vue挂载中注册子组件，所以无法使用子组件。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AN1RhVjn-1609768401794)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记八/8.jpg)\]][img-AN1RhVjn-1609768401794_Users_mac_Desktop_vue_vue_8.jpg]

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YO4rI8IL-1609768401797)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记八/9.jpg)\]][img-YO4rI8IL-1609768401797_Users_mac_Desktop_vue_vue_9.jpg]

# 语法糖注册组件 #

## 语法糖注册全局组件 ##

Vue.component('my-cpn', {
      template: `
          <div>
            <h2>我是标题</h2>
            <p>我是内容，哈哈哈哈哈</p>
            <p>我是内容，嘿嘿嘿嘿嘿</p>
          </div>
        `
    });

## 语法糖注册局部组件 ##

const app = new Vue({
      el: '#app',
      data: {
    
      },
      components: {
        'cpn2': {
          template:`
          <div>
            <h2>我是标题</h2>
            <p>我是内容，哈哈哈哈哈</p>
            <p>我是内容，嘿嘿嘿嘿嘿</p>
          </div>
          `
        }
      }
    });

# 组件模板的分离 #

*  刚才，我们通过语法糖简化了Vue组件的注册过程，另外还有一个地方的写法比较麻烦，就是template模块写法。
 *  如果我们能将其中的HTML分离出来写，然后挂载到对应的组件上，必然结构会变得非常清晰。
 *  Vue提供两种方案来定义HTML模板内容：
    
     *  使用`<script>`标签
     *  使用`<template>`标签

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>05-组件模板的分离写法</title>
    </head>
    <body>
      <div id="app">
        <cpn></cpn>
      </div>
    
      
      
    
      
      <template id="cpn">
        <div>
          <h2>我是标题</h2>
          <p>我是内容，哈哈哈</p>
        </div>
      </template>
    
    
      <script src="../js/vue.js"></script>
      <script>
    
        // 注册一个全局组件
        Vue.component('cpn', {
          template: '#cpn'
        });
    
        const app = new Vue({
          el: '#app',
          data: {
    
          },
          components: {
    
          }
        });
      </script>
    </body>
    </html>

# 组件可以访问Vue实例数据么？ #

*  组件是一个单独功能模块的封装：
    
     *  这个模块由属于自己的HTML模板，也应该有属于自己的数据data。
 *  组件中的数据时保存在哪里的呢？顶层的Vue实例中么？
    
     *  我们经过测试，组件中**不能直接访问**Vue实例中的data。
     *  而且即使可以访问，如果所有数据都放在Vue实例中，Vue实例就会变得非常臃肿。
     *  **结论**：Vue组件应该有自己保存数据的地方。

## 组件数据的存放 ##

*  组件自己的数据存放在哪里？
    
     *  组件对象也有一个data属性（也可以有methods等属性，下面我们有用到）
     *  只是这个data属性必须是一个**函数**
     *  而且这个**函数返回一个对象**，对象内部保存着数据

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nSzenXmM-1609768401799)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记八/10.jpg)\]][img-nSzenXmM-1609768401799_Users_mac_Desktop_vue_vue_10.jpg]

# 父子组件的通信 #

*  在前面将父子组件的时候，我们提到子组件是不能引用父组件或者Vue实例的数据的。
 *  但是在开发中，往往一些数据确实需要**从上层传递到下层**。
    
     *  比如在一个页面中，我们从服务器请求到了很多的数据。
     *  其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。
     *  这个时候，并不会让子组件再一次发送一个网站请求，而是直接让**大组件(父组件)将数据传递给小组件(子组件)**。
 *  如何进行父子组件间的通信呢？Vue官方提到：
    
     *  通过props向子组件传递
     *  通过事件向父组件发送消息
 *  下面的代码中，我们直接将Vue实例当做父组件，并且其中包含子组件来简化代码。
 *  在真实开发中，**Vue实例和子组件的通信**与**父组件和子组件的通信**过程是一样的。

## props基本用法（父传子） ##

*  在组件中，使用选项props来声明需要从父级接收到的数据。
 *  props的值有**两种方式**：
    
     *  方式一：**字符串数组**，数组中的字符串就是传递时的名称。
     *  方式二：**对象**，对象可以设置传递时的类型，也可以设置默认值。
 *  先看一个简单的props传递案例：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>08-组件通信-父组件向子组件传递数据</title>
    </head>
    <body>
      <div id="app">
        <cpn :cmovies="movies" :cmessage="message"></cpn>
      </div>
    
      <template id="cpn">
        <div>
          <h2>{
       {cmessage}}</h2>
          <p>{
       {cmovies}}</p>
        </div>
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
    
        // 父传子：props
        const cpn = {
          template: '#cpn',
          data() {
            return {
    
            }
          },
          props: ['cmovies', 'cmessage'],
          methods: {
    
          },
        }
    
        const app = new Vue({
          el: '#app',
          data: {
            message: '我是阿牛',
            movies: ['海王', '海贼王', '海尔兄弟'],
          },
          components: {
            cpn
          }
        });
      </script>
    </body>
    </html>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y3HuOwgG-1609768401801)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记八/11.jpg)\]][img-y3HuOwgG-1609768401801_Users_mac_Desktop_vue_vue_11.jpg]

*  在前面，我们的props选项是使用一个数组。
 *  我们说过，除了数组之外，我们也可以使用对象，当**需要对props进行类型验证**时，就需要对象写法了。
 *  验证都支持哪些数据类型呢？
    
     *  String
     *  Number
     *  Boolean
     *  Array
     *  Object
     *  Date
     *  Function
     *  Symbol
 *  当我们又自定义构造函数时，验证也支持自定义的类型。

props: {
      cmovies: {
        type: Array,
        default() {
          return []
        },
      },
      cmessage: {
        type: String,
        default: '12345',
      }
    }

## 自定义事件（子传父） ##

*  props用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中。
 *  我们应该如何处理呢？这个时候，我们需要使用自定义事件来完成。
 *  什么时候需要自定义事件呢？
    
     *  当子组件需要向父组件传递参数时，我们就要用到自定义事件了。
     *  我们之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件。
 *  **自定义事件流程**：
    
     *  在子组件中，通过`$emit()`来触发事件。
     *  在父组件中，通过v-on来监听子组件。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title><!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>09-组件通信-子传父（自定义事件）</title>
    </head>
    <body>
      
      <div id="app">
        <cpn @item-click="cpnClick"></cpn>
      </div>
    
      
      <template id="cpn">
        <div>
          <button v-for="item in categroies"
                  @click="btnClick(item)">{
       {item.name}}</button>
        </div>
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
    
        // 子组件
        const cpn = {
          template: '#cpn',
          data() {
            return {
              categroies: [
                {id: 'aaa', name: '热门推荐'},
                {id: 'aaa', name: '手机数码'},
                {id: 'aaa', name: '家用家电'},
                {id: 'aaa', name: '电脑办公'},
              ],
            }
          },
          methods: {
              btnClick(item) {
                // 发射事件
                this.$emit('item-click', item);
              }
            }       
          }
        // 父组件
        const app = new Vue({
          el: '#app',
          data: {
            message: '我是阿牛',
          },
          components: {
            cpn
          },
          methods: {
            cpnClick(item) {
              console.log(item.name);
            }
          }
        });
      </script>
    </body>
    </html>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H52qQEPN-1609768401802)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记八/12.jpg)\]][img-H52qQEPN-1609768401802_Users_mac_Desktop_vue_vue_12.jpg]

这样我们点击按钮，就会触发子组件传递给父组件的`item-click`事件，父组件执行方法cpnClick，将从子组件一同传来的参数item传入cpnClick方法，并执行该方法：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aNDpfygb-1609768401806)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记八/13.gif)\]][img-aNDpfygb-1609768401806_Users_mac_Desktop_vue_vue_13.gif]

## 父子组件传值案例 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>10-组件通信-父子组件传递</title>
    </head>
    <body>
    
      
      <div id="app">
        <cpn :number1="num1" 
              :number2="num2"
              @num1change="num1change"
              @num2change="num2change"
               ></cpn>
      </div>
    
      
      <template id="cpn">
        <div>
          <h2>props:{
       {number1}}</h2>
          <h2>data:{
       {dnumber1}}</h2>
          
          <input type="text" :value="dnumber1" @input="num1Input">
          <h2>props:{
       {number2}}</h2>
          <h2>data:{
       {dnumber2}}</h2>
          <input type="text" :value="dnumber2" @input="num2Input">
        </div>
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
    
        // 子组件
        const cpn = {
          template: '#cpn',
          props: {
            number1: Number,
            number2: Number,
          },
          data() {
            return {
              dnumber1: this.number1,
              dnumber2: this.number2,
            }
          },
          methods: {
            num1Input(event) {
              // 1. 将input中的value赋值到dnumber中
              this.dnumber1 = event.target.value;
              // 2. 为了让父组件可以修改值，发出一个事件
              this.$emit('num1change', this.dnumber1);
              // 3. 同时修改dnumber2的值
              this.dnumber2 = this.dnumber1 * 100;
              this.$emit('num2change', this.dnumber2);
            },
            num2Input(event) {
              // 1.将input中的value赋值到dnumber2
              this.dnumber2 = event.target.value;
              // 2. 为了让父组件可以修改值，发出一个事件
              this.$emit('num2change', this.dnumber2);
    
              // 3. 同时修改dnumber1的值
              this.dnumber1 = this.dnumber2 / 100;
              this.$emit('num1change', this.dnumber1);
            }
          }
        }
    
        // 父组件
        const app = new Vue({
          el: '#app',
          data: {
            num1: 0,
            num2: 1
          },
          components: {
            cpn
          },
          methods: {
            num1change(value) {
              this.num1 = value * 1;
            },
            num2change(value) {
              this.num2 = value * 1;
            }
          }
        })
      </script>
    </body>
    </html>

*  该案例结合了**双向绑定**，融汇贯通父子组件的传值，略显复杂。
 *  达到一个效果：下面的值num2是上面的值num1的100倍。

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UEEel2Mp-1609768401807)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记八/14.gif)\]][img-UEEel2Mp-1609768401807_Users_mac_Desktop_vue_vue_14.gif]

# 父子组件的访问方式 #

*  有时候我们需要父组件**直接访问**子组件，子组件直接访问父组件，或者是子组件访问跟组件。
    
     *  **父组件访问子组件**：使用`$children`或`$refs`。
     *  **子组件访问父组件**：使用`$parent`

## $children的使用 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>11-组件访问-父访问子-children</title>
    </head>
    <body>
      <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn></cpn>
        <button @click="btnClick">按钮</button>
      </div>
    
    
      <template id="cpn">
        <div>
          <h2>我是子组件</h2>
        </div>
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
    
        const cpn = {
          template: '#cpn',
          data() {
            return {
              name: '我是子组件的name'
            }
          },
          methods: {
            showMessage() {
              console.log('showMessage');
            }
          }
        }
    
        const app = new Vue({
          el: '#app',
          data: {
          },
          components: {
            cpn
          },
          methods: {
            btnClick() {
              console.log(this.$children);
              for(let c of this.$children){
                console.log(c.name);
                c.showMessage();
              }
            }
          }
        });
      </script>
    </body>
    </html>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DbCWojVX-1609768401810)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记八/15.jpg)\]][img-DbCWojVX-1609768401810_Users_mac_Desktop_vue_vue_15.jpg]

## $refs的使用 ##

*  上面我们使用`$children`获得子组件，当时使用这个方法在实际开发中**比较少**。因为想要获取某个特定的组件，就需要知道该组件在其父组件中的位置，也就是需要知道获得的数组的索引下标。
 *  而我们用的**最多**的是这个`$refs`。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>12-组件访问-父访问子-ref</title>
    </head>
    <body>
      <div id="app">
        <cpn></cpn>
        <cpn></cpn>
        <cpn ref="aaa"></cpn>
        <button @click="btnClick">按钮</button>
      </div>
    
    
      <template id="cpn">
        <div>
          <h2>我是子组件</h2>
        </div>
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
    
        const cpn = {
          template: '#cpn',
          data() {
            return {
              name: '我是子组件的name'
            }
          },
          methods: {
            showMessage() {
              console.log('showMessage');
            }
          }
        }
    
        const app = new Vue({
          el: '#app',
          data: {
          },
          components: {
            cpn
          },
          methods: {
            btnClick() {
              console.log(this.$refs.aaa.name);
            }
          }
        });
      </script>
    </body>
    </html>

*  `$refs`获取一个对象，包含所有设置了**ref属性**(ref=aaa)的子组件，然后通过`$refs.aaa`就可以获得该子组件了。

## $parent ##

*  通过`$parent`可以**访问父组件**，但是在实际开发中使用较少。

## $root ##

*  通过`$root`可以访问根组件，也很少用。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>13-组件访问-子访问父-parent</title>
    </head>
    <body>
      <div id="app">
        <cpn></cpn>
      </div>
    
    
      <template id="cpn">
        <div>
          <h2>我是cpn</h2>
          <ccpn></ccpn>
        </div>
      </template>
    
      <template id="ccpn">
        <div>
          <h2>我是ccpn</h2>
          <button @click="getParent">获得父组件</button>
          <button @click="getRoot">获得根组件</button>
        </div>
      </template>
    
      <script src="../js/vue.js"></script>
      <script>
    
        const ccpn = {
          template: '#ccpn',
          methods: {
            getParent() {
              console.log(this.$parent);
            },
            getRoot() {
              console.log(this.$root);
            }
          }
        }
    
        const cpn = {
          template: '#cpn',
          components: {
            ccpn
          }
        }
    
        const app = new Vue({
          el: '#app',
          components: {
            cpn
          }
        });
      </script>
    </body>
    </html>

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vTmcLEKA-1609768401813)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记八/16.gif)\]][img-vTmcLEKA-1609768401813_Users_mac_Desktop_vue_vue_16.gif]

#  #

[img-PnlLl4Ru-1609768401766_Users_mac_Desktop_vue_vue_1.png]: /images/20221119/945e24242a26439f8079034118a92028.png
[img-t09Jc4LZ-1609768401770_Users_mac_Desktop_vue_vue_2.jpg]: /images/20221119/d5bf96fcc4bc4694813354641c774d24.png
[img-KANDXa1J-1609768401775_Users_mac_Desktop_vue_vue_3.jpg]: /images/20221119/a31b3e725c024853898419d02ef61572.png
[img-Y6fLFHQ3-1609768401785_Users_mac_Desktop_vue_vue_4.jpg]: /images/20221119/3e5918a768384757b12ae05e1668d95b.png
[img-Tur42Aib-1609768401789_Users_mac_Desktop_vue_vue_5.jpg]: /images/20221119/5fffcb311d684eeb857bcac923bfff3d.png
[img-h4sMsJuy-1609768401790_Users_mac_Desktop_vue_vue_6.jpg]: /images/20221119/68364c70b1cb403bac9087a7e923f214.png
[img-Qyp5XZjc-1609768401792_Users_mac_Desktop_vue_vue_7.jpg]: /images/20221119/47063d2d9c3745229593a0e5e7e044ee.png
[img-AN1RhVjn-1609768401794_Users_mac_Desktop_vue_vue_8.jpg]: /images/20221119/ec6ff4f9ec2642ae8acdf71ddbf54b64.png
[img-YO4rI8IL-1609768401797_Users_mac_Desktop_vue_vue_9.jpg]: /images/20221119/f5ba654e4bd44e8f88098db9625b0868.png
[img-nSzenXmM-1609768401799_Users_mac_Desktop_vue_vue_10.jpg]: /images/20221119/65c0144a6888425ea1719aa5db36f0ad.png
[img-y3HuOwgG-1609768401801_Users_mac_Desktop_vue_vue_11.jpg]: /images/20221119/1909ed89b7e54ea5b2519e9ea903d7b3.png
[img-H52qQEPN-1609768401802_Users_mac_Desktop_vue_vue_12.jpg]: /images/20221119/8a9be8f16db84c34842000c02863fd23.png
[img-aNDpfygb-1609768401806_Users_mac_Desktop_vue_vue_13.gif]: /images/20221119/62b1955980b347339317daa4c6c645aa.png
[img-UEEel2Mp-1609768401807_Users_mac_Desktop_vue_vue_14.gif]: /images/20221119/170719ccfeae4a5b84e030d8ce064134.png
[img-DbCWojVX-1609768401810_Users_mac_Desktop_vue_vue_15.jpg]: /images/20221119/cf79b963f8504cb0b9d87acbbee68415.png
[img-vTmcLEKA-1609768401813_Users_mac_Desktop_vue_vue_16.gif]: /images/20221119/5df27772952047fcace0c82e69aea7ac.png