vue传值和事件方式

Tychio 发布于2019-08-26 10:58 / 2394人阅读

摘要：袓组件我是祖组件要给孙组件准备的儿组件孙组件二的事件方式子向父传递兄弟之间组件我是兄长，弟弟收好了组件兄长，弟弟收到了。

一、vue的传值方式

1、父向子传递

属性Props

//child
porops:{msg:String}
//parent

2、子向你传递

引用refs

//child
data(){
    return {
        hw:"我是子类父类可以调用"
    }
}

//parent

this.$refs.hw

3.provide和inject实现袓孙传值

provide:就相当于加强版父组件prop

inject:就相当于加强版子组件的props

只要在上一层级的声明的provide，那么下一层级无论多深都能够通过inject来访问到provide的数据

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

如果需要传可响应的值，请使用引用类型的数值，比如{}||[]等。

袓组件

儿组件

孙组件

二、vue的事件方式

1、子向父传递

//child
this.$emit("add",good)
//parent

2、兄弟之间

A组件

B组件

父组件

3、袓孙之间(隔辈之间)传递

1.使用$attrs和$listeners实现袓孙组件之间数据传递

本质探索

$attrs:包含了父作用域不作为prop被识别(且获取)的特性绑定(class和style除外)，就是说，他获取到的除了prop里的可以收到和元素自有属性之外的所有自定义属性

$listeners:包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

孙组件

儿组件

袓组件

总结：可以用于传值和事件从后代组件

2.使用dispatch函数实现后代向祖先传值

//main.js里
Vue.prototye.dispatch = dispatch;
/**
eventName 派发事件名称
data 派发的数据
**/
function dispatch(eventName,data){
    let parent = this.$parent
    while(parent){
        parent.$emit(eventName,data)
        parent =  parent.$parent;
    }
}

后代组件

祖组件

3.使用事件总线

main.js

class Bus{
    constructor(){
        this.callbacks = {}
    }
    $on(name,fn){
        this.callbacks[name] =  this.callbacks[name] || []
        this.callbacks[name].push(fn)
    }
    $emit(name,args){
        if(this.callbacks[name]){
            this.callbacks[name].forEach(cb=>cb(args))
        }
    }
}
Vue.prototype.$bus = new Bus()

A组件

B组件

最后一种使用Vuex，但vuex比较大，后续会跟上，敬请期待

云服务器 GPU云服务器 js传值和传址 asp传值和得到值 Vue_Vue 是传值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106907.html

简单说说vue的父子组件，父子组件传值和vuex

摘要：我们需要在里改动一下代码首先就是绑定一个自定义事件再增加然后在中变成就是触发父组件中的方法所以，触发了父组件的函数，改变了父组件的的值，父组件再通过传值给子组件。从而实现数据传递，父子组件通信。一、vue的父子组件之间是如何传值的？首先呢，需要说说的是，vue既然有双向绑定，那为何会有父子组件之间的传值问题？这个问题也简单，vue的组件会供其他的vue页面进行调用，如果数组都是双...

Tecode 2019-08-22 18:31 评论0 收藏0
关于前端Vue框架的知识点

摘要：最近有时间，整理一下的知识点，很多都是面试常见的的生命周期如果你能理解了这张图，也就对的生命周期有了一个大致的了解。创建前后在阶段，实例的挂载元素还没有。模式下，前端的必须和实际向后端发起请求的一致，如。最近有时间，整理一下Vue的知识点，很多都是面试常见的 1、Vue的生命周期如果你能理解了这张图，也就对Vue的生命周期有了一个大致的了解。 showImg(https://s...

PAMPANG 2019-08-23 18:27 评论0 收藏0
vue -- 非父子组件传值，事件总线（eventbus）的使用方式

摘要：我的个人博客地址资源地址非父子组件传值，事件总线的使用方式我的博客地址如果您对我的博客内容有疑惑或质疑的地方，请在下方评论区留言，或邮件给我，共同学习进步。欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言先说一下什么是事件总线，其实就是订阅发布者模式；比如有一个bus对象，这个对象上有两个方法，一个是on（监听，也就是订阅），一个是emit（触发，也就...

zone 2019-08-23 14:37 评论0 收藏0
Vue 组件子传父理解篇

摘要：子传父想要子传父，通过子组件控制父组件方法，进而让父组件的方法自己改变自己的明确父组件绑定的上内容作用域都属于父组件的，因此传值的都是父组件的或者例如下面的案例，首先和中左面都是子组件的接受的变量值，右面都有可能是父组件或者传值简单 vue 子传父 1.想要子传父，通过子组件控制父组件方法，进而让父组件的方法自己改变自己的data 2.明确父组件绑定的dom上内容作用域都属于父组件的，...

wudengzan 2019-08-23 15:07 评论0 收藏0
在vue中使用JSX语法

摘要：发明了，利用语法来创建虚拟。然而，对持久化实例的缺乏也意味着函数式组件不会出现在的组件树里。这个很有用，当你在父组件给子组件绑定事件时就需要这个了。之前考虑过用动态组件来切换，但是放弃了，因为没有直观啊。另外推荐大家多用函数式组件提高性能。什么是JSX? JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到{ ...

quietin 2019-08-22 18:04 评论0 收藏0