[vue] 组件通信

爱心天使的守护

已于 2022-05-18 00:34:24 修改

阅读量224

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

于 2022-05-17 23:28:26 首次发布

本文链接：https://blog.csdn.net/aixintianshideshouhu/article/details/124832890

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中父子组件之间的通信方式，包括prop属性传递、事件监听与触发、style/class样式传递、attribute处理、native修饰符、$listeners获取、v-model与sync、$parent/$children引用以及跨组件的Provide/Inject、router、vuex和event bus应用。

摘要由CSDN通过智能技术生成

父子组件通信

绝大部分 vue 本身提供的通信方式, 都是父子组件通信

prop

最常见的组件通信方式之一, 由父组件传递到子组件

event

最常见的通信方式之一, 当子组件发生了某些事, 可以通过 event 通知父组件

// father.vue
// 子组件传递多个参数
// 父组件必须使用 arguments 来接收
<template>
  <div class="app-container">
    123
    <TestComp msg="hello vue" @change="handleEmit(arguments)" />
  </div>
</template>

<script>
import TestComp from "./components/TestComp.vue";
export default {
  name: "App",
  components: {
    TestComp,
  },
  methods: {
    handleEmit(e) {
      console.log(e);
      console.log(e[0]);
      console.log(e[1]);
    }
  }
}
</script>

// child.vue
<template>
  <div @click="handleClick">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: "TestComp",
  props: {
    msg: {
      type: String,
    }
  },
  methods: {
    handleClick() {
      this.$emit('change', {1:1}, 1);
    }
  }
}
</script>

style 和 class

父组件可以向子组件传递 style 和 class, 他们会合并到子组件的根元素中

attribute

如果父组件向子组件传递了一些属性到子组件, 但子组件没有声明这些属性, 则他们称之为 attribute, 这些属性会直接附着在子组件的根元素上。

不包含 style 和 class, 他们会特殊处理

在子组件中可以通过$attrs 获取到传递的 attribute, 子组件可以修改 attribute

// 父组件
<template>
  <div class="app-container">
    123
    <TestComp data-a="1" data-b="2" msg="hello vue" />
  </div>
</template>

<script>
import TestComp from "./components/TestComp.vue";
export default {
  name: "App",
  components: {
    TestComp,
  }
}
</script>

// 子组件
<template>
  <div>
  </div>
</template>

<script>
export default {
  name: "TestComp",
  created () {
    console.log(this.$attrs);
    this.$attrs.msg = "xxx";
  }
}
</script>

// 渲染结果
// 附着在子组件的根元素
<div class="app-container"> 
    123 
    <div data-a="1" data-b="2" msg="hello vue">  
    </div>
</div>

子组件可以通过 inherit: false 配置, 禁止将 attribute 附着在子组件的根元素上, 但不影响通过 $attrs 获取

native 修饰符

在注册事件时, 父组件可以使用natice修饰符, 将事件注册到子组件根元素上

// 父组件
<template>
  <div class="app-container">
    123
    <TestComp @click.native="handleClick(arguments)" />
  </div>
</template>

<script>
import TestComp from "./components/TestComp.vue";
export default {
  name: "App",
  components: {
    TestComp,
  },
  methods: {
    handleClick(e) {
      console.log('123', e);
    }
  }
}
</script>

// 子组件
<template>
  <div>
    456
  </div>
</template>

<script>
export default {
  name: "TestComp",
  inheritAttrs: false,
}
</script>

点击子组件根元素, 可以触发父组件绑定的事件

$listeners

子组件可以通过$listeners 获取父组件传递的所有事件处理函数

// 父组件
<template>
  <div class="app-container">
    123
    <TestComp @start="handleStart" @end="handleEnd" />
  </div>
</template>

<script>
import TestComp from "./components/TestComp.vue";
export default {
  name: "App",
  components: {
    TestComp,
  },
  methods: {
    handleStart() {},
    handleEnd() {}
  }
}
</script>

// 子组件
<template>
  <div>
    456
  </div>
</template>

<script>
export default {
  name: "TestComp",
  inheritAttrs: false,
  created() {
    console.log(this.$listeners);
  }
}
</script>

这里输出的是对象的形式

// 函数名 :函数实现
func-name: function() {}

v-model

做双向绑定, 单独讲解

sync 修饰符

和v-model 的作用类似, 用于双向绑定, 不同点在于v-model只能针对一个数据进行双向绑定, 而sync修饰符没有限制。

sync是语法糖。

// 父组件
<template>
  <div class="app-container">
    <TestComp :num1.sync="n1" :num2.sync="n2"/>
    <!-- 等同于 -->
        <Numbers
          :num1="n1"
          @update:num1="n1 = $event"
          :num2="n2"
          @update:num2="n2 = $event"
        />
    <!-- 等同于 -->
  </div>
</template>

<script>
import TestComp from "./components/TestComp.vue";
export default {
  name: "App",
  components: {
    TestComp,
  },
  data() {
    return {
      n1: 0,
      n2: 0
    }
  },
  methods: {
    setTimeInterval() {
      for(let i=1; i<100; i++) {
        setTimeout(()=>{
          console.log(this.n1, this.n2)
        }, i*1000);
      }
    }
  },
  created() {
    this.setTimeInterval();
  }
}
</script>

// 子组件
<template>
  <div>
    <p>
      <button @click="$emit(`update:num1`, num1 - 1)">-</button>
      {{ num1 }}
      <button @click="$emit(`update:num1`, num1 + 1)">+</button>
    </p>
    <p>
      <button @click="$emit(`update:num2`, num2 - 1)">-</button>
      {{ num2 }}
      <button @click="$emit(`update:num2`, num2 + 1)">+</button>
    </p>
  </div>
</template>

<script>
export default {
  props: ["num1", "num2"],
};
</script>

在子组件中修改, 父组件传入的 num1, num2, 父组件的 n1, n2 也会变

$parent 和 $children

在组件内部, 可以通过$parent和$children分别获取当前组件的父组件和子组件

输出的子组件是一个数组, 包含当前组件中的所有组件。

$slots 和 $scopedSlots

todo

ref

父组件可以通过 ref 获取到子组件的实例。

可以获取组件实例或 html 元素。

跨组件通信

Provide 和 Inject

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

只能用于祖先和后代, 兄弟组件不可以

router

如果一个组件改变了地址栏, 所有监听地址栏的组件都会做出反应

常见场景: 通过点击 router-link组件改变了地址, router-view组件渲染其他内容。

router-link, router-view 是 vue-router 提供的组件。link改变地址, view 监听地址变化, 渲染内容。

vuex

使用于大型项目的数据仓库, 可以跟踪数据的变化。

mutation: 不能写异步操作

action: 可以写异步操作

store 模式

适用于中小型项目的数据仓库

// store.js
const store = {
  loginUser: ...,
  setting: ...
}

// compA
const compA = {
  data(){
    return {
      loginUser: store.loginUser
    }
  }
}

// compB
const compB = {
  data(){
    return {
      setting: store.setting,
      loginUser: store.loginUser
    }
  }
}

组件 A 和 B 拿到 store 里的数据, 放到 data 中, 数据自动变成响应式。

// store.js
export default {
    number: {
        value: 1,
    }
}

// 父组件
<template>
  <div class>
    <TestComp />
    {{number.value}}
    <button @click="number.value++">增加</button>
  </div>
</template>

<script>
import TestComp from "./components/TestComp.vue";
import store from "./store";
export default {
  name: "App",
  components: {
    TestComp,
  },
  data() {
    return {
      number: store.number
    }
  }
}
</script>

// 后代组件
<template>
  <div>
    {{number.value}}
    <button @click="number.value++">增加</button>
  </div>
</template>

<script>
import store from "../store";
export default {
  data() {
    return {
      number: store.number
    }
  }
}
</script>

缺点: 无法跟踪数据的变化。数据是在所有组件中共享的, 如果出现问题, 无法跟踪是那个组件修改的。

eventbus

一个组件触发一个事件, 把该事件传递到事件总线上, 监听对应事件的组件或普通模块会接收到事件总线传递的消息。

提供监听某个事件的接口
提供取消监听的接口
触发事件的接口 (可传递数据)
触发事件后会自动通知监听者

// 事件总线

// 模拟实现一
const listeners = {

};

export default {

    // 监听某一个事件
    $on(eventName, handler) {
        if (!listeners[eventName]) {
            listeners[eventName] = new Set();
        }
        listeners[eventName].add(handler);
    },
    // 取消某个事件的监听
    $off(eventName, handler) {
        if (!listeners[eventName]) {
            return;
        }
        listeners[eventName].delete(handler);
    },
    // 触发事件
    $emit(eventName, ...args) {
        if (!listeners[eventName]) {
            return;
        }
        for (const handler of listeners[eventName]) {
            handler(args);
        }
    },
}

// 模拟实现二
import Vue from 'vue'

Vue.prototype.$bus = new Vue({});