• 组件通信的方法

    目录

    组件通信共有12个方式 三大种类

    1.父子组件通信

    2.兄弟组件通信

    3.跨层级组件通信

    总结

    父子:

    兄弟 

    跨组件

    组件通信共有12个方式 三大种类

    1.props

    2.$emit/v-on

    3..sync

    4.v-model

    5.ref

    6.children/parent

    7.attrs/listeners

    8.provide/inject

    9.EventBus​​​​​​​

    10.Vuex

    11.$root

    12.slot

    这十二种可以分为三类

    1.父子组件通信

    1. props
    2. $emit/v-on
    3. attrs/listeners
    4. ref  (http://t.csdn.cn/AGOIR)
    5. .sync
    6. v-model
    7. children/parent

    父组件    通过属性传值  ,  子 props 接收

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>父组件向子组件传值--props</title>
    8.     <script src="./js/vue.min.js"></script>
    9. </head>
    10. <body>
    11.     <div id="app">   
    12.         <menu-item title="来自父组件的值"></menu-item>
    13.   <!--   在子组件身上绑定自定义属性来接收父组件data中的数据 -->
    14.         <menu-item :tit="title"></menu-item>
    15.     </div>
    16.     <script>
    17. Vue.component('menu-item',{
    18.     props:['tit'],  //props用来接收父组件传过来的值
    19.     //在props中使用驼峰形式，模版中要改为使用短横线拼接  props里面的值只读，不能修改
    20.     //props是单向数据流
    21.     data(){
    22.         return{
    23.         }
    24.     },
    25.     template:'
      {{tit}}
      '
    26. })
    27.         var vm=new Vue({
    28.            el:'#app',
    29.            data:{
    30.               title:'我是父组件中的数据'
    31.            },
    32.            methods:{
    33.            }
    34.         });
    35.     </script>
    36. </body>
    37. </html>

    子向父传值    

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Document</title>
    6. </head>
    7. <body>
    8.   <div id="app">
    9.     <!--   父组件 -->
    10.     <div :style='{fontSize:fontSize+"px"}'>{{pmsg}}</div>
    11.    <!--  子组件 -->
    12.     <menu-item :parr="parr" @aas="blune"></menu-item>
    13.   </div>
    14.   <script type="text/javascript" src="js/vue.js"></script>
    15.   <script type="text/javascript">
    16.     /*
    17.       子组件向父组件传值-基本用法
    18.       props传递数据原则：单向数据流
    19.     */
    20.     Vue.component('menu-item', {
    21.      props:['parr'],
    22.      data(){
    23.            return {
    24.                msg1:'这是子组件传递过来的值'
    25.            }
    26.         },
    27.       template: `
    28.         <div>
    29.           <ul>
    30.             <li v-for="(item,index) in parr" :key="index">{{item}}</li>
    31.           </ul>
    32.           <button @click='dd'>扩大父组件中字体大小</button> 
    33.         </div>
    34.       `,
    35.       methods:{
    36.           dd(){
    37.            this.$emit("aas",this.msg1)
    38.           } 
    39.       }
    40.     });
    41.  //$emit
    42.     var vm = new Vue({
    43.       el: '#app',
    44.       data: {
    45.         pmsg: '父组件中内容',
    46.         parr: ['apple','orange','banana'],
    47.         fontSize: 10
    48.       },
    49.       methods: {
    50.         blune(message){
    51.             this.fontSize+=5;
    52.             console.log(message);   
    53.         }
    54.       }
    55.     });
    56.   </script>
    57. </body>
    58. </html>

    2.兄弟组件通信

    1. EventBus
    2. Vuex
    3. $parent

    兄弟组件传值 事件总线

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8.     <script src="./js/vue.min.js"></script>
    9. </head>
    10. <body>
    11.     <div id="app">
    12.         <brother></brother>
    13.         <sister></sister>
    14.     </div>
    15.     <script>
    16.         var enveBus = new Vue();
    17.         Vue.component('brother', {
    18.             data() {
    19.                 return {
    20.                     kk: ''
    21.                 }
    22.             },
    23.             methods: {
    24.                 dd() {
    25.                     enveBus.$emit("bTs", '这是哥哥给妹妹的爱')
    26.                 }
    27.             },
    28.             template: `
    29.         <div>
    30.           <button @click='dd'>这是一个哥哥组件---{{kk}}</button>
    31.         </div>
    32.       `,
    33.             mounted() {
    34.                 enveBus.$on('asd', (result) => {
    35.                     this.kk = result;
    36.                 })
    37.             }
    38.         });
    39.         Vue.component('sister', {
    40.             data() {
    41.                 return {
    42.                     sis: ''
    43.                 }
    44.             },
    45.             template: `
    46.    <div>
    47.      <button @click="cc">这是一个妹妹组件---{{sis}}</button> 
    48.    </div>
    49.  `,
    50.             mounted() {
    51.                 enveBus.$on('bTs', (message) => {
    52.                     this.sis = message
    53.                 })
    54.             },
    55.             methods: {
    56.                 cc() {
    57.                     enveBus.$emit('asd', '这是妹妹对哥哥的爱');
    58.                 }
    59.             }
    60.         });
    61.         var vm = new Vue({
    62.             el: '#app',
    63.             data: {
    64.             },
    65.             methods: {
    66.             }
    67.         });
    68.     </script>
    69. </body>
    70. </html>

    跨层级组件通信

    1. provide/inject
    2. EventBus
    3. Vuex
    4. attrs/listeners
    5. $root

    跨组件 provide

    1. <script lang="ts" setup>
    2. // provide, inject
    3.  
    4. import { provide } from 'vue';
    5.  
    6. // provide(名字，值)
    7. const { separtor = '' } = defineProps<{
    8.   separtor?: string
    9. }>()
    10.  
    11. // 向后代传递值
    12. provide('separtor', separtor)
    13. </script>
    14. <template>
    15. <div class="xtx-bread">
    16.   <slot></slot>
    17. </div>
    18. </template>
    19.  
    20. <style scoped lang="less">
    21. .xtx-bread {
    22.   display: flex;
    23.   // padding: 25px 10px;
    24.   &-item {
    25.     a {
    26.       color: #666;
    27.       transition: all 0.4s;
    28.       &:hover {
    29.         color: @xtxColor;
    30.       }
    31.     }
    32.   }
    33.   i {
    34.     font-size: 12px;
    35.     margin-left: 5px;
    36.     margin-right: 5px;
    37.     line-height: 22px;
    38.   }
    39. }
    40. </style>

    inject

    1. <script lang="ts" setup>
    2. import { inject } from 'vue';
    3.  
    4. // inject(名字)
    5. // 获取分隔符
    6. const separtor = inject('separtor')
    7.  
    8. defineProps<{
    9.   to?: string // 要跳转的位置
    10. }>()
    11. </script>
    12. <template>
    13. <slot> </slot>
    14. <div class="xtx-bread-item">
    15.   <!-- 是否需要跳转 -->
    16.   <router-link v-if="to" :to="to"><slot> </slot></router-link>
    17.   <slot v-else> </slot>
    18.  
    19.   <!-- 分隔符从祖先来的 -->
    20.   <i v-if="separtor">{{ separtor }}</i>
    21.   <!-- 默认分隔符 -->
    22.   <i v-else class="iconfont icon-angle-right"></i>
    23. </div>
    24.  
    25. </template>
    26. <style lang="less" scoped>
    27. .xtx-bread-item {
    28.   i {
    29.     margin: 0 6px;
    30.     font-size: 10px;
    31.   }
    32.   // 最后一个i隐藏
    33.   &:nth-last-of-type(1) {
    34.     i {
    35.       display: none;
    36.     }
    37.   }
    38. }
    39. </style>

    总结

    父子:

    1.props 通过属性传值，子props接收

    2.$emit/v-on 父组件使用子组件声明的自定义事件，传值时触发

    3.v-model 原理即props与$emit；父：v-model="值"、子：this.$emit('input',值)

    4..sync 原理即：属性名& this.$emit('update:属性名', 值)

    5.refs 操作dom，通过this.$refs

    6.$children/$parent this.$children获取所有子组件的数组对象，包括子组件的属性和监听事件； this.$parent获取父组件的对象，包括子组件的属性和监听事件；

    7.$attrs / $listeners 读取到的只读(不可改)： this.$attrs获取所有当前元素的属性(不包括：class、style、props传递给子的) this.$listeners获取所有当前元素的监听事件(不包括：.native声明的)

    兄弟 

    1.vuex state中为动态分享的数据； mutations为方法，修改state中的数据； actions(c,v)异步函数(也可为同步)异步操作后c.commit()调用components中的函数间接修改state的数据； getters类似于computed动态属性 modules：用于模块化时的声明

    2.EventBus 通过自定义事件：this.$emit与this.$on配合使用 ...

    跨组件

    1.provide/inject provide('键','值') const a = inject('键')

    2.$root 通过this.$root获取到根，从而逐级查找到具体项(标签元素)的属性与值

    3.vuex

    4.EventBus

    5.$attrs/$listeners

  • 相关阅读:
    FFmepg--音频编码流程--pcm编码为aac
    关于ASO优化的分步入门指南2
    12.2C集群清理环境
    Mistral 7B 比Llama 2更好的开源大模型 （二）
    人工智能：创新之路
    eladmin代码生成详细过程
    跨境电商年底风控升级，测评养号如何选择稳定且纯净的IP环境？
    QT中窗口自绘制效果展示
    TensorFlow学习笔记--（2）张量的常用运算函数
    Matter over Wi-Fi: Raspberry Pi 4开发环境设置
  • 原文地址：https://blog.csdn.net/LJM51200/article/details/126651749