vue 事件调用 传参_vue传值和事件方式

一、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绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

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

袓组件

import Child from 'Child'

export default{

components:{

Child

},

provide(){

return {

msg:"我是祖组件要给孙组件准备的"

}

},

data(){

return {

}

},

methods:{

}

}

儿组件

import Child1 from 'Child1'

export default{

components:{

Child1

},

data(){

return {

}

},

methods:{

}

}

孙组件

{{msg}}

export default{

inject:['msg']

data(){

return {

}

},

methods:{

}

}

二、vue的事件方式

1、子向父传递

//child

this.$emit('add',good)

//parent

2、兄弟之间

A组件

Brother

export default {

name: "BrotherA",

methods: {

postBrotherMsg() {

this.$parent.$emit("foo", "我是兄长，弟弟收好了");

}

}

};

B组件

Brother

export default {

name: "BrotherB",

mounted() {

this.$nextTick(() => {});

this.$parent.$on("foo", val => console.log('兄长，弟弟收到了。你的信息是：',val));

}

};

父组件

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

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

本质探索

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

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

孙组件

$attrs:{{$attrs['two']}}

import Child1 from 'Child1'

export default{

inheritAttrs: false,

data(){

return {

}

},

methods:{

test2(){

this.$emit('test2','我是孙子组件')

}

}

}

儿组件

$attrs:{{$attrs['one']}}

import Child1 from 'Child1'

export default{

components:{

Child1

},

inheritAttrs: false,

data(){

return {

}

},

methods:{

test1(){

this.$emit('test1','我是儿子组件')

}

}

}

袓组件

import Child from 'Child'

export default{

components:{

Child

},

data(){

return {

one:"我是child1",

two:"我是child2"

}

},

methods:{

onTest1(val){

conosle.log("我是父亲接收到的test1事件回调",val)

},

onTest2(val){

conosle.log("我是父亲接收到的test2事件回调",val)

}

}

}

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

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;

}

}

后代组件

{{msg}}

export default{

data(){

return {

}

},

methods:{

}

}

祖组件

import Child1 from 'Child1'

export default{

components:{

Child1

},

data(){

return {

}

},

mounted(){

this.$on('hello',(val)=>console.log(val))

},

methods:{

}

}

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组件

{{msg}}

export default{

name:"ComA",

data(){

return {

}

},

methods:{

test1(){

this.$bus.$emit('foo')

}

}

}

B组件

export default{

data(){

return {

}

},

mounted(){

this.$on('msg',(val)=>console.log(val))

},

methods:{

}

}

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