史上最全的vue中组件之间的传值方式

这篇具有很好参考价值的文章主要介绍了史上最全的vue中组件之间的传值方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

重中之重的就是组件之间数据传递的几种方式

Vue2最常见的11种组件间的通讯方式

  1. props
  2. $emit / v-on
  3. .sync
  4. v-model
  5. ref(获取子组件的属性和调用子组件方法)本质就是获取到子组件的this
  6. $children / $parent(获取子组件(不包括顺孙组件)的数组 / 获取父组件的this)
  7. $attrs / $listeners($attrs子组件里面获取父组件传递的属性,$listeners子组件获取父组件自定义的方法(这个自定义方法是子组件通过$emit传递过去的))
  8. provide / inject
  9. EventBus
  10. Vuex
  11. $root(获取根组件的,new Vue里面定义的方法和属性)
  12. Slot
  13. 发布订阅(pubsub-js)
  14. 本地存储(localstorage和sessionstorage)

props

父组件向子组件传送数据,这应该是最常用的方式了

子组件接收到数据之后,不能直接修改父组件的数据。

否则会报错,因为当父组件重新渲染时,数据会被覆盖。如果只在子组件内要修改的话推荐使用 computed

// Parent.vue 传送

<template>

<child :msg="msg"></child>

</template>

// Child.vue 接收

export default {

// 写法一 用数组接收

props:['msg'],

// 写法二 用对象接收,可以限定接收的数据类型、设置默认值、验证等 props:{

msg:{

type:String,

default:'这是默认数据'

}

},

mounted(){

console.log(this.msg)

},

}

.sync 子组件可以修改父组件内容

.sync可以帮我们实现父组件向子组件传递的数据的双向绑定,所以子组件接收到数据后可以直接修改,并且会同时修改父组件的数据

// Parent.vue

<template>

<child :page.sync="page"></child>

</template>

<script>

export default {

data(){

return {

page:1

}

}

}

// Child.vue

export default {

props:["page"],

computed(){

// 当我们在子组件里修改 currentPage 时,父组件的 page 也会随之改变 currentPage {

get(){

return this.page

},

set(newVal){

this.$emit("update:page", newVal)

}

}

}

}</script>

v-model

和 .sync 类似,可以实现将父组件传给子组件的数据为双向绑定,子组件通过 $emit 修改父组件的数据

// Parent.vue

<template>

<child v-model="value"></child>

</template>

<script>

export default {

data(){

return {

value:1

}

}

}

// Child.vue

<template>

<input :value="value" @input="handlerChange">

</template>

export default {

props:["value"],

// 可以修改事件名,默认为 input model:{

event:"updateValue"

},

methods:{

handlerChange(e){

this.$emit("input", e.target.value)

// 如果有上面的重命名就是这样

this.$emit("updateValue", e.target.value)

}

}

}</script>

ref

ref 如果在普通的DOM元素上,引用指向的就是该DOM元素;

如果在子组件上,引用的指向就是子组件实例;

父组件可以通过 ref 主动获取子组件的属性或者调用子组件的方法

// Child.vue

export default {

data(){

return {

name:"oldCode"

}

},

methods:{

someMethod(msg){

console.log(msg)

}

}

}

// Parent.vue

<template>

<child ref="child"></child>

</template>

<script>

export default {

mounted(){

const child = this.$refs.child

console.log(child.name)

child.someMethod("调用了子组件的方法")

}

}</script>

$emit / v-on

子组件通过派发事件的方式给父组件数据,或者触发父组件更新等操作

// Child.vue 派发

export default {

data(){

return { msg: "这是发给父组件的信息" }

},

methods: {

handleClick(){

this.$emit("sendMsg",this.msg)

}

},

}// Parent.vue 响应

<template>

<child v-on:sendMsg="getChildMsg"></child>

// 或 简写

<child @sendMsg="getChildMsg"></child>

</template>

export default {

methods:{

getChildMsg(msg){

console.log(msg) // 这是父组件接收到的消息 }

}

}

$attrs / $listeners

多层嵌套组件传递数据时,如果只是传递数据,而不做中间处理的话就可以用这个,比如父组件向孙子组件传递数据时

$attrs:包含父作用域里除 class 和 style 除外的非 props 属性集合。通过 this.$attrs 获取父作用域中所有符合条件的属性集合,然后还要继续传给子组件内部的其他组件,就可以通过 v-bind="$attrs"

$listeners:包含父作用域里 .native 除外的监听事件集合。如果还要继续传给子组件内部的其他组件,就可以通过 v-on="$linteners"使用方式是相同的

// Parent.vue

<template>

<child :name="name" title="1111" ></child>

</template

export default{

data(){

return {

name:"oldCode"

}

}

}

// Child.vue

<template>

// 继续传给孙子组件

<sun-child v-bind="$attrs"></sun-child>

</template>

export default{

props:["name"], // 这里可以接收,也可以不接收 mounted(){

// 如果props接收了name 就是 { title:1111 },否则就是{ name:"oldCode", title:1111 }

console.log(this.$attrs)

}

}

$children / $parent

$children:获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组,可以直接拿到子组件中所有数据和方法等

$parent:获取到一个父节点的 VueComponent 对象,同样包含父节点中所有数据和方法等

// Parent.vue

export default{

mounted(){

this.$children[0].someMethod() // 调用第一个子组件的方法

this.$children[0].name // 获取第一个子组件中的属性 }

}

// Child.vue

export default{

mounted(){

this.$parent.someMethod() // 调用父组件的方法

this.$parent.name // 获取父组件中的属性 }

}

provide / inject

provide / inject 是依赖注入,在一些插件或组件库里被常用

provide:可以让我们指定想要提供给后代组件的数据或方法

inject:在任何后代组件中接收想要添加在这个组件上的数据或方法,不管组件嵌套多深都可以直接拿来用

要注意的是 provide 和 inject 传递的数据不是响应式的,也就是说用 inject 接收来数据后,provide 里的数据改变了,后代组件中的数据不会改变,除非传入的就是一个可监听的对象 所以建议还是传递一些常量或者方法

// 父组件

export default{

// 方法一 不能获取 methods 中的方法 provide:{

name:"oldCode",

age: this.data中的属性

},

// 方法二 不能获取 data 中的属性 provide(){

return {

name:"oldCode",

someMethod:this.someMethod // methods 中的方法 }

},

methods:{

someMethod(){

console.log("这是注入的方法")

}

}

}

// 后代组件

export default{

inject:["name","someMethod"],

//或者

inject: { foo: { from: 'bar', default: 'foo' } },

mounted(){

console.log(this.name)

this.someMethod()

}

}

EventBus

EventBus 是中央事件总线,不管是父子组件,兄弟组件,跨层级组件等都可以使用它完成通信操作

定义方式有三种

// 方法一

// 抽离成一个单独的 js 文件 Bus.js ,然后在需要的地方引入

// Bus.js

import Vue from "vue"

export default new Vue()

// 方法二 直接挂载到全局

// main.js

import Vue from "vue"

Vue.prototype.$bus = new Vue()

// 方法三 注入到 Vue 根对象上

// main.js

import Vue from "vue"new Vue({

el:"#app",

data:{

Bus: new Vue()

}

})

使用如下,以方法一按需引入为例

// 在需要向外部发送自定义事件的组件内

<template>

<button @click="handlerClick">按钮</button>

</template>

import Bus from "./Bus.js"

export default{

methods:{

handlerClick(){

// 自定义事件名 sendMsg

Bus.$emit("sendMsg", "这是要向外部发送的数据")

}

}

}

// 在需要接收外部事件的组件内

import Bus from "./Bus.js"

export default{

mounted(){

// 监听事件的触发

Bus.$on("sendMsg", data => {

console.log("这是接收到的数据:", data)

})

},

beforeDestroy(){

// 取消监听

Bus.$off("sendMsg")

}

}

Vuex 在大项目中被常用

Vuex 是状态管理器,集中式存储管理所有组件的状态。

新建一个index.js文件, 里内容如下

import Vue from 'vue'

import Vuex from 'vuex'

import getters from './getters'

import actions from './actions'

import mutations from './mutations'

import state from './state'

import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({

modules: {

user

},

getters,

actions,

mutations,

state

})

export default store

然后在 main.js 引入

import Vue from "vue"

import store from "./store"new Vue({

el:"#app",

store,

render: h => h(App)

})

然后在需要的使用组件里

import { mapGetters, mapMutations } from "vuex"

export default{

computed:{

// 方式一 然后通过 this.属性名就可以用了

...mapGetters(["引入getters.js里属性1","属性2"])

// 方式二

...mapGetters("user", ["user模块里的属性1","属性2"])

},

methods:{

// 方式一 然后通过 this.属性名就可以用了

...mapMutations(["引入mutations.js里的方法1","方法2"])

// 方式二

...mapMutations("user",["引入user模块里的方法1","方法2"])

}

}

// 或者也可以这样获取this.$store.state.xxxthis.$store.state.user.xxx

slot插槽

就是把子组件的数据通过插槽的方式传给父组件使用,然后再插回来

// Child.vue

<template>

<div>

<slot :user="user"></slot>

</div>

</template>

export default{

data(){

return {

user:{ name:"oldCode" }

}

}

}

// Parent.vue

<template>

<div>

<child v-slot="slotProps">

{{ slotProps.user.name }}

</child>

</div>

</template>

发布订阅pubsub-js(react也使用)

使用subpub插件实现

消息订阅=时间监听

方法:

import PubSub from 'pubsub-js'

mounted(){

      /* 订阅方法,消息名称,匿名函数msg=消息名(不可省略),index是你需要传递的参数 */

PubSub.subscribe('delData',(msg,index)=>{

this.renwu.splice(index,1)

});

},

接收组件

import PubSub from 'pubsub-js'

/* 消息发布,触发消息订阅里的逻辑 */

PubSub.publish('delData',this.index);文章来源地址https://www.toymoban.com/news/detail-771611.html

到了这里,关于史上最全的vue中组件之间的传值方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue组件之间传值

    首先总结一下vue里面传值的几种关系: 如上图所示, A与B、A与C、B与D、C与F组件之间是父子关系; B与C之间是兄弟关系;A与D、A与E之间是隔代关系; D与F是堂兄关系,针对以上关系 我们把组件之间传值归类为: 1.父子组件之间的通讯 2.非父子组件之间的通讯(兄弟组件 隔代

    2024年02月09日
    浏览(40)
  • Vue 组件之间传值

    一、Vue 组件之间传值的主要方法 Vue 3 对于组件之间传递值的基本思想与 Vue 2 相似,但是有一些语法和 API 上的改变,主要的传值方法有以下几种: 1、父组件向子组件传值,使用 props:可以通过在子组件上绑定 props,然后在父组件中通过 v-bind 绑定相应的数据来传递数据。

    2024年02月02日
    浏览(42)
  • Vue子组件向父组件传值(this.$emit()方法)

    首先必须在父组件中引用子组件,然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 声明 使用 第二步 子组件向父组件传值 1.  在子组件中需要向父组件传值处使用this.$emit(\\\"function\\\",param);    //其中function为父组件定义函数,param为需要传递参数 2.  在父组件中子

    2024年02月10日
    浏览(32)
  • vue父子组件之间传值的方法

    父传子 方式: props 效果: 把父组件的 fatherName 属性传入子组件,在子组件中使用 父组件代码: 子组件代码: 子传父 方式: $emit 效果: 在子组件触发事件,修改父组件的fatherName属性 父组件代码: 子组件代码: 兄弟传值 方式: eventBus.js 效果: 任意组件之间相互传值 代

    2024年02月09日
    浏览(46)
  • vue组件之间的五种传值方法(父子\兄弟\跨组件)

    父传子 (自定义属性 props) 父组件向子组件传参,通过自定义属性的方式进行传参,在子组件中使用prop定义自定义的属性,然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上,那在子组件中props里面的自定义属性可以直接使用。 子传父 (自定义事件 this.$emit) 子组

    2023年04月08日
    浏览(79)
  • vue子传父的一种新方法:this.$emit(‘input‘, value)可实现实时向父组件传值

    今天要说的就是利用v-model和this.$emit(‘input’,value)实现子传父。 众所周知,v-model是给input绑定,方便对表单的双向绑定。 其实,v-model是个语法糖,具体案例如下所示。 我们今天所说的是自定义组件实时子传父,请继续看下面代码:

    2024年02月13日
    浏览(46)
  • vue3中的组件传值的方式

    1. props 父组件使用 props 传递数据给子组件: 子组件使用 props 接收: 2. emit 自定义事件 子组件触发事件,父组件监听该事件并更新数据: 3. refs 通过 ref 给子组件绑定引用,然后通过该引用直接更新子组件的数据或调用子组件的方法: 在 child 组件中: 4. provide / inject 父组件提供数据

    2024年02月07日
    浏览(33)
  • Vue组件间通信方式超详细(父传子、父传后代、子传父、后代传父、兄弟组件传值)

    父组件:父组件引入子组件时,通过 child :parentValue = \\\"parentValue\\\"/child 子组件传值。 备注:这种方式父传值很方便,但是传递给后代组件不推荐(父-子-孙),且这种方式父组件不能直接修改父组件传过来的数据。 子组件:子组件通过props即 props:{ parentValue:{ type:String, default:\\\"\\\" } } 来

    2024年02月05日
    浏览(40)
  • react自定义组件间的传值,if..else..判断,for循环(嵌套map使用),点击事件(Onclick),页面上事件实事传递参数(基础版)

    9.自定义组件间的传值 10.if..else..判断 11.for循环(嵌套map使用) 12.点击事件(Onclick) 13.页面上事件实事传递参数 14.关于export default function App()与export function App()的区别    export default不需要{}      import  Gallery from \\\'./Gallery.js\\\';    export function需要{}       import {Gallery} from \\\'./Galler

    2024年01月17日
    浏览(43)
  • vue组件之间通信方式

    一、全局事件总线 范围 :任意组件间 步骤 :1、创建事件总线 第一种方式:通过自定义事件总线方式 局部引用 第二种方式:通过原型绑定 main.js 局部引用 解绑事件 二、props和$emit 范围 :父子组件间 父组件 子组件 三、Vuex(状态管理) 范围 :多个组件之间共享状态,可以

    2024年03月10日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包