40-55 组件化、父子组件通信

于 2021-09-23 00:10:26 发布
阅读量117 收藏
点赞数 1
分类专栏： VUE vue学习笔记 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42221321/article/details/120277409
版权

40-55 组件化、父子组件通信

全局化组件

组件必须先进行注册，挂载到实例时
当全局组件中使用其他组件时，必须在实例前使用；


<body>
    <div id ="app">
        <div id="home"><span>首页</span></div>
        <div id="message"><span>消息</span></div>
        <div id="mine">
            <span>我的</span>
            <button-counter></button-counter>
        </div>
        <lk-box></lk-box>
        

    </div>
    <script>
     const app = Vue.createApp({
        data() {
            return{
                msg:'hello'
            }
        },
        methods: {}
     });
    //  注册全局组件--必须注册好了再挂载
    app.component('button-counter',{
        data(){
            return{
                count:0
            }
        },
        template:`
            <button @click="count++">你点击了按钮{{count}}次
            </button>
        `
    });
    app.component('lk-box',{
        template:`
            <div style="width:200px;height:200px;background-color:red;">
                <button-counter></button-counter>
            </div>
        `
    })
     app.mount('#app');
    </script>
</body>

在这里插入图片描述

局部组件-使用components选项进行引入

注意不能直接像全局组件一样运用，局部组件只能运用在挂载它的实例上
错误写法

      const Box ={
          data(){
              return{
              }
          },
          template:`
            <div style="width:200px;height:200px;background-color:red;">
                <button-counter></button-counter>
                <lk-count></lk-count>
            </div>
        `
      };

正确写法：局部组件中要使用另一个局部组件，也需要componets后才能使用

const Box ={
  components:{
      'lk-count':Counter,
  },
    template:`
      <div style="width:200px;height:200px;background-color:red;">
          <button-counter></button-counter>
          <lk-count></lk-count>
      </div>
  `
};

在这里插入图片描述

父子组件

当一个组件挂载在子组件下，子组件下都能使用，当子组件挂载在父组件下时，父组件不能直接应用这一个相同的组件，也需要先经过注册后才能使用


  <body>
    <div id="app">
        <lk-count></lk-count>
        <div>
            <lk-box></lk-box>
        </div>
        <lk-count></lk-count>
    </div>
    <script>
      // 注册一个局部组件
      const Counter = {
          data(){
              return{
                  count:0
              }
          },
          template:`
              <button @click="count++">点击了{{count}}次</button>
          `
      };

    const Box ={
        components:{
            'lk-count':Counter,
        },
          template:`
            <div style="width:200px;height:200px;background-color:red;">
                <button-counter></button-counter>
                <lk-count></lk-count>
            </div>
        `
      };
       const app = Vue.createApp({
          data() {
              return{
                  msg:'hello'
              }
          },
          methods: {},
          components:{
            //   键值对形式
              'lk-box':Box,

          }
       }).mount('#app');
    </script>
  </body>

此时count这个组件并没有挂载在app下，在Box这个子组件挂载了，当父页面也调用了count这个组件，不会显示，因为需要父组件也通过components对组件进行注册才能使用
在这里插入图片描述

组件标签化

第一种方式
使用srcipt提取结构，再通过id选择器去引入
例子


  <body>
    <div id="app">
        <lk-count></lk-count>
        <div>
            <lk-box></lk-box>
        </div>
    </div>
    <script type="text/template" id="lk_count">
        <button @click="count++">点击了{{count}}次</button>
    </script>
    <script type="text/template" id="lk_box">
        <div style="width:200px;height:200px;background-color:red;">
            <button-counter></button-counter>
            <lk-count></lk-count>
        </div>
    </script>
    <script>
      // 注册一个局部组件
      const Counter = {
          data(){
              return{
                  count:0
              }
          },
          template:`#lk_count`
      };

    const Box ={
        components:{
            'lk-count':Counter,
        },
          template:`#lk_box`
      };
       const app = Vue.createApp({
          data() {
              return{
                  msg:'hello'
              }
          },
          methods: {},
          components:{
            //   键值对形式
              'lk-count':Counter,
              'lk-box':Box,

          }
       }).mount('#app');
    </script>
  </body>

第二种-template标签（项目开发中常用）

    <!-- 2、使用template标签 -->
    <template  id="lk_count">
        <button @click="count++">点击了{{count}}次</button>
    </template>
    <template id="lk_box">
        <div style="width:200px;height:200px;background-color:red;">
            <button-counter></button-counter>
            <lk-count></lk-count>
        </div>
    </template>

掌握

1、组件不能直接访问vue实例的数据

count组件不能直接使用app实例中的data,需要使用，必须在组件内部的data定义，两个data间不会互相影响，这主要是为了组件的封闭性
需要传递的话可以参照后面的父子组件传值

  <body>
    <div id="app">
        <h1>{{msg}}</h1>
        <lk-count></lk-count>
    </div>
    <script>
      // 注册一个局部组件
      const Counter = {
          data(){
              return{
                  count:0,
                  msg:'hello2'
              }
          },
          template:`
              <button @click="count++">点击了{{count}}次</button>
              <h2>{{msg}}</h2>
          `
      };

       const app = Vue.createApp({
          data() {
              return{
                  msg:'hello'
              }
          },
          methods: {},
          components:{
            //   键值对形式
              'lk-count':Counter,

          }
       }).mount('#app');
    </script>
  </body>

在这里插入图片描述

data为什么是函数，不是对象

栈区：存放简单的数据类型
堆区：存放引用的数据类型
在这里插入图片描述

<script>
         let obj1=[];
         let obj2=[];
         console.log(obj1===obj2);
</script>

输出为false,因为指向的堆区不同

	<script>
        let obj ={
            name:'hello',
        }

        let p1=obj;
        let p2=obj;
        let p3=obj;
        p1.name="change";
        console.log(p1,p2,p3)
        console.log(p1===p2);
        
    </script>

会发现，这里的p1，p2，p3恒等于，引用指向的是一样的，但是有一个问题，但有一个改变了，另外两个也会跟着一起改变，如果data按照对象的方式，那么有一个地方更改了，所有的都会被更改，跟实际开发不符
在这里插入图片描述
实例
这里的data是函数类型，return相当于每次都创建一个新实例，互不影响（每次实例化都是一个新的对象）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="js/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      <lk-count></lk-count>
      <p>-------------</p>
      <lk-count></lk-count>
      <p>-------------</p>
      <lk-count></lk-count>
      <p>-------------</p>

    </div>
    <template id="count">
      <div>
        <p>计算结果：{{count}}</p>
        <button @click="add">+</button>
        <button @click="sub">-</button>
      </div>
    </template>
    <script>
      const Count = {
        data() {
          return {
            count: 0,
          };
        },
        template: '#count',
        methods: {
          add() {
            this.count++;
          },
          sub() {
            this.count--;
          },
        },
      };
      const app = Vue.createApp({
        data() {
          return {
            msg: "hello",
          };
        },
        methods: {},
        components: {
          'lk-count': Count,
        },
      }).mount("#app");
    </script>
  </body>
</html>

在这里插入图片描述
当把data改为return一个对象，则所有的组件指向的都是一样的，一个更改会干扰其他的
所以data一定要是函数类型

const obj = {
   count: 0,
 };
 const Count = {
   data() {
     return obj;
 },

在这里插入图片描述

组件间通信

原则：不要在子组件内直接改变父组件的状态数据；数据和处理数据的函数在同一个模块内

组件通信常用方式

(1)props-父传子

（1）在组件内声明所有的props
在这里插入图片描述
组件需要使用到的数据，通过props接受父组件传递过来

      // 创建局部组件
      const box = {
        // 接受数据
        props: ["brand", "colleges"],
        template: `
            <div>
            <p>------</p>
            <h1>{{brand}}</h1>
            <ul>
            <li v-for="item in colleges">{{item}}</li>
            </ul>
            <p>------</p>
        </div>
        `,
      };

父组件使用子组件时，传入数据

        <lk-box :brand="百度" :colleges="['vr','ar']"></lk-box>

在定义接受的数据时，可定义接受的类型，是否必填，默认值（规范代码，开发中十分常用）；
在控制台会出现对应的提示

        props: {
          brand:{
            type:String,
            required:true,
            default:'hhhh'
          },
          colleges:Array
        },

例子

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="js/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- 首页 -->
      <div id="home">
        <span>首页</span>
        <lk-box  :colleges="['vr','ar']"></lk-box>
      </div>

    </div>

    <script>
      // 创建局部组件
      const box = {
        // 接受数据
        props: {
          brand:{
            type:String,
            required:true,
            default:'hhhh'
          },
          colleges:Array
        },
        template: `
            <div>
            <p>------</p>
            <h1>{{brand}}</h1>
            <ul>
            <li v-for="item in colleges">{{item}}</li>
            </ul>
            <p>------</p>
        </div>
        `,
      };
      const app = Vue.createApp({
        data() {
          return {
            msg1: "hello",
            msg2: ["webkk", "java", "python"],
          };
        },
        components: {
          "lk-box": box,
        },
        methods: {},
      }).mount("#app");
    </script>
  </body>
</html>

效果：
在这里插入图片描述

(2)使用注意
在这里插入图片描述
命名方式：组件命令最好是驼峰命名法，在html引用时则采用-的方式
例如组件吗lkBox ，则引用时为lk-Box

(2)子传父–自定义事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="js/vue.js"></script>
  </head>

  <body>
      <!-- 父组件 -->
    <div id="app" style="background-color: blue;width: 300px;height: 300px;"> 
      <lk-box @boxclick="boxFunc"></lk-box>
    </div>
    <!-- 子组件 -->
    <template id="box">
        <div style="background-color: red;width:200px;height: 200px;">
            <button @click="btnclick">点我</button>
        </div>
    </template>
    <script>
        const Box = {
            template:'#box',
            methods: {
                btnclick(item){
                    alert('点击了')
                    // 发射自定义事件(发射事件的名称，参数)
                    this.$emit('boxclick','传递的数据');
                }
            }
        };
      const app = Vue.createApp({
        data() {
          return {
            msg: "hello",
          };
        },
        components: {
            'lk-box':Box
        },
        methods: {
            boxFunc(item){
                console.log('子组件发生点击',item)
            }
        },
      }).mount("#app");
    </script>
  </body>
</html>

在这里插入图片描述

效果：点击子组件的按钮，触发事件，传递值给父组件
思路：
先有一个子组件，和父组件
子组件进行动态监听，绑定发射事件，this.$emit(‘发射事件的名称’,‘参数’)，当有多个参数时，可以传递为数组或者对象；
子组件与父组件使用同名函数进行传递，父组件再自定义函数接收
可参考父子组件传值

5、父子组件相互访问

父组件访问子组件–ref

通过添加ref来获取子组件
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="js/vue.js"></script>
  </head>

  <body>
    <div id="app">
      <lk-box ref="box1"></lk-box>
      <button @click="getChildComponent">获取子组件</button>

    </div>
    <script>
      const Box = {
        data() {
          return {
            msg: "kkkk",
          };
        },
        template: `
        <div style="background-color:red;width:200px;height: 200px;">
            <button  @click="btnclick">点我</button>
        </div>
        `,
        methods: {
        btnclick() {
            alert("点击了");
          },
        },
      };
      const app = Vue.createApp({
        data() {
          return {
            msg: "hello",
          };
        },
        components: {
         'lk-box':Box
        },
        methods: {
            getChildComponent(){
               console.log(this.$refs.box1.msg);
            }
        },
      }).mount("#app");
    </script>
  </body>
</html>

子组件访问父组件–$parent 和 $root（不建议使用，影响封闭性）

  // 子组件访问父组件-this.$parent;
  console.log(this.$parent,this.$parent.msg);

  // 子组件访问根组件--this.$root;
  console.log(this.$root,this.$root.msg)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="js/vue.js"></script>
  </head>

  <body>
    <div id="app">
        <lk-box></lk-box>
    </div>
    <script>
        const LkButton ={
            data(){
                return{
                    count:0
                }
            },
            methods: {
                btnClick(){
                    this.count++;
                    // 子组件访问父组件
                    console.log(this.$parent,this.$parent.msg);

                    // 子组件访问根组件
                    console.log(this.$root,this.$root.msg)

                }
            },
            template:`
                <button @click="btnClick()">点击了按钮{{count}}次</button>
            `
        };
        const lkBox={
            data(){
                return{
                    msg:'abc'
                }
            },
            template:`
                <div style="width:200px;height:200px;background-color:red">
                    <lk-button></lk-button>
                </div>
            `,
            components: {
                'lk-button':LkButton
            }
        };
        const app = Vue.createApp({
         data() {
             return{
                 msg:'hello'
             }
         },
         components: {
                'lk-box':lkBox
            },
         methods: {}
      }).mount('#app');
    </script>
  </body>
</html>

在这里插入图片描述

卷毛崽
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值