oclick vue 传参 函数_Vue父子传参的方式

感觉Vue中父子传参的方式，实在是太多了，于是做一个小总结，只是总结我所知道的。

欢迎吐槽。。我的博客​storm4542.github.io

1.父传子

基本就用一个方式，props

父亲通过在 标签 中写入需要传入的数据。

我是爸爸，下面是儿子

儿子在 实例中的 props 选项中获取

//son.vueexport default {

name:'son',

props:{

selected:{

type:Boolean

},

title:{

type:String

}

}

}

2.子传父

# update:my-prop-name 模式

Vue 是单项数据流，所以不允许 儿子 直接修改父亲的数据，也不允许儿子直接修改自己的props。

假设一个情况，点击儿子，儿子需要改变 selected 的状态。

儿子方面

触发点击事件后， 让儿子触发一个 update 事件，把新的 selected 传出去

title:{{title}} selected:{{selected}}

export default {

name: "son",

props: {

selected: {

type: Boolean

},

title: {

type: String

}

},

methods: {

onClick() {

this.$emit("update:selected", !this.selected); //关键点

}

}

};

.son {

border: 1px solid red;

}

父亲方面

在标签中监听 update事件，并将传过来的 $event付给 selected，这样就完成了一次传参。

我是爸爸，下面是儿子

import Son from "./son";

export default {

name: "father",

components: {

Son

},

data() {

return {

selected: true

};

}

};

简单方式

.sync 修饰符

我是爸爸，下面是儿子

# $parents API

儿子方面

从 this.$parent中可以获取到 父组件 的 data 数据 ，直接进行修改，是不是很刺激。

methods: {

onClick() {

this.$parent.selected = !this.$parent.selected;

}

}

虽然刺激，但是，我建议调用父组件的函数，来切换状态。

父亲方面

//father.vueexport default {

name: "father",

components: {

Son

},

data() {

return {

selected: true

};

},

methods: {

changeSelected() {

this.selected = !this.selected;

}

}

};

儿子方面

//son.vuemethods: {

onClick() {

this.$parent.changeSelected();

}

}

# EventBus

如果只是一个父亲，一个儿子上面的方法非常的简单实用，但是如果是祖孙三代传参呢？上面的方法就很麻烦了。

具体怎么麻烦，可以看一下我的这篇文章，用原始的方法造 tabs轮子 :Storm4542：使用Vue做一个tabs轮子​zhuanlan.zhihu.com

废话不多说，开始用 EventBus做一个简单的 tabs组件。

#app.vue

新闻

汽车

代码

新闻列表

汽车列表

代码列表

import Tab from "./components/tabs.vue";

import TabItem from "./components/tab-item";

import TabPane from "./components/tab-pane";

export default {

name: "app",

components: {

Tab,

TabItem,

TabPane

}

};

# tabs.vue

import TabItem from "./tab-item.vue";

import Vue from "vue"; //引入VUE

export default {

name: "tab",

props: {

selected: {

type: [Number, String]

}

},

data() {

return {

eventBus: new Vue() // 创建 eventBus

};

},

provide() {

return {

eventBus: this.eventBus // 提供 eventBus

};

},

mounted() {

this.eventBus.$emit("update:selected", this.selected);

//发布消息，告诉大家，现在的selected是啥

}

};

# tabs-item.vue

export default {

name: "tab-item",

props: {

name: {

type: [String, Number]

}

},

inject: ["eventBus"], //注入 eventBus

data() {

return {

active: false

};

},

created() {

this.eventBus.$on("update:selected", newSelected => {

this.active = this.name === newSelected;

}); //接收消息，如果newselected 和我的 name 相同，那么我就被选中了

},

methods: {

onClick() {

this.eventBus.$emit("update:selected", this.name);

//发布消息，如果点击了我，我就告诉大家，我被选中了

}

}

};

.active {

color: red;

}

# tab-pane.vue

export default {

name: "tab-pane",

props: {

name: {

type: [String, Number]

}

},

data() {

return {

active: false

};

},

inject: ["eventBus"],//注入 eventBus

created() {

this.eventBus.$on("update:selected", newSelected => {

this.active = this.name === newSelected;

});

//接收消息，如果newselected 和我的 name 相同，那么我就被选中了

}

};

.pane {

color: red;

}

# 灵活运用 provide inject

//father.vueexport default {

name:'father',

data(){

return {

someThing:'father'

}

},

provide(){

return {

father:this

}

}

}

//son.vueexport default {

name:'son',

inject:['father'],

methods:{

onClick(){

this.father.someThing = 'son'

}

}

}