关于前端:Vue-组件通信的-8-种方式

前言

做了半年的公司零碎，终于就在前天上线了。前期改BUG工夫拖得太长了，呈现的大部分BUG 是前端与后端信息不对称导致的，逻辑性谬误很不多，用户体验上略微差点，毕竟第一次做这么大的零碎(100w+)，通过这次零碎的开发，总结了不少教训，如何更好的跟后端人员合作开发以及如何设计来进步用户体验上，之前本人做开发没关注这方面，只重视性能实现，前期的这块多补补。

我的项目上线后，接下来就是前期的保护更新了，最近工夫终于不是之前那么繁忙了，简略的对系统做了下复盘。因为我的项目采纳的技术栈是Vue，平时开发只重视性能实现了，接下来陆续会对 Vue 深入分析,来封装罕用业务组件，以及Vue源码解析<br/><br/> 本章将是对Vue 组件通信的8办法总结，日常开发组件通信亲密，相熟组件通信能够更好的开发业务。

`Vue` 组件之间传值

1. 父组件向子组件传递值

在父组件中引入子组件

注册子组件

在页面中应用，子组件标签上动静绑定传入动静值 / 动态值

在子组件中，应用 props 来承受 父组件 传递过了的值

子组件接管的父组件的值分为援用类型和一般类型两种：

一般类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）

援用类型：数组（Array）、对象（Object）

#父组件

<template>
  <div>
    <!-- 传递值 -->
    <Test
     :obj="obj" 
     info="测试"/>
  </div>
</template>

<script>
// 引入子组件
import Test from "../components/Test.vue";
export default {
  name: "about",
  // 注册子组件
  components: {
    Test,
  },
  data() {
    return {
      obj: {
        code: 200,
        title: "前端自学社区",
      },
    };
  },
};
</script>

<template>
    <div>
        <h1>{{obj.code}}</h1><br>
        <h2>{{obj.title}}</h2>
        <h3>{{info}}</h3>
    </div>
</template>

<script>
    export default {
        name:'test',
        props:{
            obj:Object,
            info: [String,Number]  //info值为其中一种类型即可，其余类型报正告
        }
    }
</script>

因为 Vue 是单向数据流， 子组件 是不能间接批改 父组件 的值。

2. 子组件向父组件传递值

子组件通过绑定事件，通过 this.$emit('函数名'，传递参数)

#父组件

<Test
     :obj="obj" 
     info="测试"
     @modify="modifyFatherValue"/>

<script>
// 引入子组件
import Test from "../components/Test.vue";
export default {
  name: "about",
  // 注册子组件
  components: {
    Test,
  },
  data() {
    return {
      msg:'我是父组件'
    };
  },
  methods:{
    // 承受子组件传递来的值，赋值给data中的属性
    modifyFatherValue(e){
      this.msg = e
    }
  }
};
</script>

# 子组件

<button @click="modifyValue">批改父组件的值</button>


<script>
    export default {
        name:'test',
        methods:{
            modifyValue(){
                this.$emit('modify','子组件传递过去的值')
            }
        }
    }
</script>

3. 父组件通过 `$refs` / `$children` 来获取子组件值

$refs :

获取DOM 元素和组件实例来获取组件的属性和办法。

通过在子组件上绑定 ref ，应用 this.$refs.refName.子组件属性 / 子组件办法

$children :

以后实例的子组件，它返回的是一个子组件的汇合。如果想获取哪个组件属性和办法，能够通过 this.$children[index].子组件属性/f办法

示例 Text 组件

<script>
    export default {
        name:'test',
        data() {
            return {
                datas:"我是子组件值"
            }
        },
        props:{
            obj:Object,
            info: [String,Number]
        },
        methods:{
            getValue(){
                console.log('我是Test1')
            }
        }
    }
</script>

示例 Text2组件

<template>
    <div>
        <h1>我是Test2</h1>
    </div>
</template>

<script>
    export default {
        name:'test',
        data() {
            return {
                datas:"我是Test2"
            }
        },
        created(){
         console.log( this.$parent.obj ) 
         this.$parent.getQuery()
        },
        methods:{
            getTest2(){
                console.log(this.datas)
            }
            
        }
    }
</script>

`refs`

<template>
  <div>
   // 给子组件上绑定 ref  
    <Test
      ref="son"
    />
   <Test2/>
  </div>
</template>

// 通过 $refs 示例来获取 子组件的属性和办法

 console.log( this.$refs.son.datas) 

 this.$refs.son.getValue()

`$children`

//  通过 $children  来获取 子组件的属性和办法
      this.$children[0].getValue(); // 我是 Test1
      this.$children[1].getTest2();  //我是 Test2
      console.log(`---------${this.$children[1].datas}`); //我是Test2

4. 子组件通过 `$parent` 来获取父组件实例的属性和办法

<script>
    export default {
        name:'test',
        created(){
         console.log( this.$parent.obj ) 
         this.$parent.getQuery()
        },
        
    }
</script>

5. `$attrs` 和 `$listeners` 获取父组件实例属性和办法(组件嵌套状况下应用)

$attrs：蕴含了父作用域中不被认为 (且不预期为) props 的个性绑定 (class 和 style 除外)，并且能够通过 v-bind=” $attrs” 传入外部组件。当一个组件没有申明任何 props 时，它蕴含所有父作用域的绑定 (class 和 style 除外)。

$listeners：蕴含了父作用域中的 (不含 .native 修饰符) v-on 事件监听器。它能够通过 v-on=”$listeners” 传入外部组件。它是一个对象，外面蕴含了作用在这个组件上的所有事件监听器，相当于子组件继承了父组件的事件。

应用场景：多层嵌套组件的状况下应用，能够防止应用Vuex来做数据处理，应用 v-bind="$attrs" v-on="$listeners" 很不便达到业务数据传递。

父组件

<template>
    <div>
        <Test3  
        :status="status" 
        :title="title"
        @getData="getData" />
    </div>
</template>

<script>
import Test3 from "../components/Test3.vue";
    export default {
        name:'person',
        data(){
            return {
                title:'personal 组件',
                status: false
            }
        },
        methods:{
          getData(){
              console.log(this.title)
          }  
        },
        components:{
            Test3
        }
    }
</script>

子组件1

<template>
  <div>
    <h1>Test3 组件</h1>
    <br /><br />
    // 通过 $attrs（属性，除了【props中定义的属性】）  和 $listeners（办法）  来给嵌套子组件传递父组件的属性和办法
    <Test4   v-bind="$attrs" v-on="$listeners"/>
  </div>
</template>

<script>
// 引入子子组件   
import Test4 from "../components/Test4";
export default {
  name: "test3",
  props: ["title"],
  components: {
    Test4,
  },
  created() {
    console.log(this.$attrs);  //{status: false}
    console.log("-----------");
    console.log(this.$listeners); // {getData: ƒ}
  },
};
</script>

嵌套子组件

<template>
    <div>
        <h1>Test4 组件</h1>
    </div>
</template>

<script>
    export default {
        name:'test4',
        created(){
            console.log('-----Test4------')
            console.log(this.$attrs) //{status: false}
            console.log(this.$listeners) // {getData: ƒ}
        }
    }
</script>

6. 跨组件之间传值

通过新建一个 js 文件，导入 vue , 导出 vue 实例；而后通过给导出的实例上绑定事件 $emit 事件 , 而后再通过 $on 监听触发的事件，这样就能够达到全局组件数据共享。

应用场景：

它能够满足任意场景传递数据， 父子组件传值 , 子父传值 , 兄弟组件之间传值 , 跨级组件之间传值 .

通信数据比较简单时，能够采纳这种计划，我的项目比拟宏大，能够采纳 Vuex .

`vue .js`

/*
 * @Description: 
 * @Author: ZhangXin
 * @Date: 2021-01-22 15:48:56
 * @LastEditTime: 2021-01-22 15:51:24
 * @LastEditors: ZhangXin
 */

 import Vue from 'vue'

 export default new Vue()

组件A

<!--
 * @Description: 
 * @Author: ZhangXin
 * @Date: 2021-01-22 14:44:17
 * @LastEditTime: 2021-01-22 16:25:33
 * @LastEditors: ZhangXin
-->

<template>
    <div>  
        <button @click="changeValue">扭转</button>
    </div>
</template>

<script>
import zxVue from '../util/newVue.js';
    export default {
        name:'person',
        data(){
            return {
                title:'personal 组件',
                status: false
            }
        },
        methods:{
          changeValue(){
             // 通过给 vue实例绑定事件
             zxVue.$emit("getTitle", this.title)   
          }  
        }
    }
</script>

组件C

<!--
 * @Description: 
 * @Author: ZhangXin
 * @Date: 2021-01-22 15:07:30
 * @LastEditTime: 2021-01-22 16:26:38
 * @LastEditors: ZhangXin
-->
<template>
  <div>
    <h1>Test4 组件</h1>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
import zxVue from "../util/newVue";
export default {
  name: "test4",
  data() {
    return {
      title: "test4",
    };
  },
  mounted(){
    // 通过 vue 实例.$on  监听事件名，来接管跨级组件传递过去的值
    zxVue.$on("getTitle", (item) => {
      this.title = item;
      console.log(item)
    });

  }
};
</script>

7. Vuex

这里就不介绍了，完了独自写一篇文章精讲 Vuex

8. `provide` 和 `inject` 实现父组件向子孙孙组件传值。(层级不限)

provide 和 inject 这对选项须要一起应用，以容许一个先人组件向其所有子孙后代注入一个依赖，不管组件档次有多深，并在起上下游关系成立的工夫里始终失效。

provide :

是一个对象或返回一个对象的函数

该对象蕴含可注入其子孙的属性。

inject :

是一个字符串数组或者是一个对象

用来在子组件或者子孙组件中注入 provide 提供的父组件属性。

应用场景：

provide/inject能够轻松实现跨级拜访父组件的数据

# provide
//对象
provide:{
    name:'测试'
}
//返回对象的函数
provide(){
    return {
        name: '测试'
    }
}

#inject
inject:['name']

父组件

<!--
 * @Description: 
 * @Author: ZhangXin
 * @Date: 2021-01-22 23:24:16
 * @LastEditTime: 2021-01-22 23:49:50
 * @LastEditors: ZhangXin
-->
<template>
    <div>
        <h1>我是父组件</h1>
        <Son />
    </div>
</template>

<script>
import Son from '../components/son/SonOne'
    export default {
        name:'father',
        provide(){
            return {
                titleFather: '父组件的值'
            }
        },
        components:{
            Son
        },
        data(){
            return{
                title:'我是父组件 '
            }
        },
        
    }
</script>

子组件

<template>
    <div>
        <h1>我是子孙组件</h1>
       
    </div>
</template>

<script>
import SonTwo from '../son/SonTwo'
    export default {
        name:'sonone',
        components:{
           SonTwo
        },
        inject:['titleFather'],
        created(){
             console.log(`${this.titleFather}-----------SonTwo`)
        },
        data(){
            return{
                title:'我是子组件 '
            }
        },
        
    }
</script>

子孙组件

<template>
    <div>
        <h1>我是子孙组件</h1>
       
    </div>
</template>

<script>
import SonTwo from '../son/SonTwo'
    export default {
        name:'sonone',
        components:{
           SonTwo
        },
        inject:['titleFather'],
        created(){
             console.log(`${this.titleFather}-----------SonTwo`)
        },
        data(){
            return{
                title:'我是子组件 '
            }
        },
        
    }
</script>

结语

❤️关注+点赞+珍藏+评论+转发❤️，原创不易，激励笔者创作更好的文章

关于前端:Vue-组件通信的-8-种方式

前言

`Vue` 组件之间传值

1. 父组件向子组件传递值

2. 子组件向父组件传递值

3. 父组件通过 `$refs` / `$children` 来获取子组件值

示例 Text 组件

示例 Text2组件

`refs`

`$children`

4. 子组件通过 `$parent` 来获取父组件实例的属性和办法

5. `$attrs` 和 `$listeners` 获取父组件实例属性和办法(组件嵌套状况下应用)

应用场景：多层嵌套组件的状况下应用，能够防止应用Vuex来做数据处理，应用 `v-bind="$attrs" v-on="$listeners"` 很不便达到业务数据传递。

父组件

子组件1

嵌套子组件

6. 跨组件之间传值

应用场景：

通信数据比较简单时，能够采纳这种计划，我的项目比拟宏大，能够采纳 `Vuex` .

`vue .js`

组件A

组件C

7. Vuex

8. `provide` 和 `inject` 实现父组件向子孙孙组件传值。(层级不限)

应用场景：

父组件

子组件

子孙组件

结语

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:Vue-组件通信的-8-种方式

前言

Vue 组件之间传值

1. 父组件 向 子组件 传递值

2. 子组件 向父组件传递值

3. 父组件 通过 $refs / $children 来获取子组件值

示例 Text 组件

示例 Text2组件

refs

$children

4. 子组件 通过 $parent 来获取父组件实例的属性和办法

5. $attrs 和 $listeners 获取父组件实例属性和办法(组件嵌套状况下应用)

应用场景： 多层嵌套组件的状况下应用，能够防止应用Vuex来做数据处理， 应用 v-bind="$attrs" v-on="$listeners" 很不便达到业务数据传递。

父组件

子组件1

嵌套子组件

6. 跨组件之间传值

应用场景：

通信数据比较简单时，能够采纳这种 计划，我的项目比拟宏大，能够采纳 Vuex .

vue .js

组件A

组件C

7. Vuex

8. provide 和 inject 实现父组件向子孙孙组件传值。(层级不限)

应用场景：

父组件

子组件

子孙组件

结语

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

`Vue` 组件之间传值

1. 父组件向子组件传递值

2. 子组件向父组件传递值

3. 父组件通过 `$refs` / `$children` 来获取子组件值

`refs`

`$children`

4. 子组件通过 `$parent` 来获取父组件实例的属性和办法

5. `$attrs` 和 `$listeners` 获取父组件实例属性和办法(组件嵌套状况下应用)

应用场景：多层嵌套组件的状况下应用，能够防止应用Vuex来做数据处理，应用 `v-bind="$attrs" v-on="$listeners"` 很不便达到业务数据传递。

通信数据比较简单时，能够采纳这种计划，我的项目比拟宏大，能够采纳 `Vuex` .

`vue .js`

8. `provide` 和 `inject` 实现父组件向子孙孙组件传值。(层级不限)

发表回复取消回复