一、父子组件传值
在项目里,每个组件都是独立的,那么在进行调用的时候,该如何向子组件进行参数的传递呢?
方法一、
关键词:props、$emit
父组件向子组件进行传值
如图所示为父组件,黄色框里是编写需要传递的参数;蓝色框里是为了在父组件里使用子组件而进行的声明;红色框里是为关键。:parentMsg="msg"
parentMsg是一个传递参数的变量名,可随意编写。前面接一个冒号是v-bind的简写,目的是为了将parentMsg 与data里的一个msg参数绑定,传递的值始终是所绑定的msg的值
子组件接收父组件传递的值
如图所示为子组件,子组件需使用 props 来接收父组件所传递的值。红色框里的props的值是为一个数组,意味着可接受多个参数的传递。而 parentMsg 是在父组件里定义传递参数的名字,需要注意与父组件里定义的名字保持一致。黄色框里就是将父组件传递过来的值进行展示,需注意的是 双花括号 。
总结,父组件通过 v-bind 来绑定data里的一个参数,用以向子组件进行数据的传递。子组件需要使用 props 来接收父组件向子组件传递的参数。
子组件向父组件传值
如图所示为子组件内容,红色框框里为执行条件,当点击按钮时就会触发蓝色框框里的 tofather 方法,当 tofather 方法被执行时,就会抛发绿色框框里的 fromChild 方法,此方法是定义在父组件里,稍后会有解释。并且将灰色框框里的data的值传递给父组件.
this.$emit(event,arg)
event 就是定义在父组件里的一个方法,此处是将其进行抛发.
arg 就是想要将子组件的一些内容传递给父组件.
此方法还能用于兄弟组件之间进行传值.
需要强调的是 $emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名。在这里插入图片描述
父组件接收子组件的参数
如图所示为父组件,蓝色框框里是预先定义好的变量,当子组件传递过来值时,将赋值给此变量用以动态显示,显示的模块就是绿色框框里的内容,注意双花括号! 红色框框里的 @fromChild 就是自定义了一个方法,当此方法被触发时会执行黄色框框里的 father方法。在子组件里抛发了一个 fromChild 方法,此方法就是触发 @fromChild,从而将执行father方法,目的是将子组件传递的值赋值给data里的参数,用以动态显示。方法father里的res参数就是子组件里灰色框框里的值。
方法二
关键词:独立的事件中心 eventHub
首先需要先创建 eventHub.js 文件,代码如下:
// 将在各处使用该事件中心
// 组件通过它来通信
import Vue from 'vue'
export default new Vue()
然后在组件中,可以使用emit, on, $off 分别来分发、监听、取消监听事件。
父组件 FatherComponent 代码:
<template>
<div>
<div>{{info}}</div>
<ChildComponent />
<BrotherComponent />
<button @click="toChild">传递给子组件</button>
</div>
</template>
<script>
import eventHub from '../../components/test/eventHub'
import ChildComponent from 'components/test/child-component'
import BrotherComponent from 'components/test/brother-component'
export default {
components: {
ChildComponent,
BrotherComponent
},
data () {
return {
info: ''
}
},
created: function () {
eventHub.$on('toFather', this.toFather)
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy: function () {
eventHub.$off('toFather', this.toFather)
},
methods: {
toFather (res) {
this.info = res
},
toChild () {
eventHub.$emit('toChild', 'I am your father.')
}
}
}
</script>
<style lang="less">
button {
font-size: 36px;
border: none;
padding: 20px;
background-color: #999;
color: #fff;
width: 100%;
margin-top: 30px;
}
</style>
子组件 ChildComponent 代码:
<template>
<div>
<div>{{info}}</div>
<button @click="toFather">传递给父组件</button>
<button @click="toBrother">传递给兄弟组件</button>
</div>
</template>
<script>
import eventHub from './eventHub'
export default {
data () {
return {
info: ''
}
},
created: function () {
eventHub.$on('toChild', this.toChild)
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy: function () {
eventHub.$off('toChild', this.toChild)
},
methods: {
toChild (res) {
this.info = res
},
toFather () {
eventHub.$emit('toFather', 'I am your child.')
},
toBrother () {
eventHub.$emit('toBrother', 'I am your brother.')
}
}
}
</script>
<style lang="less">
</style>
兄弟组件 BrotherComponent 代码:
<template>
<div>{{info}}</div>
</template>
<script>
import eventHub from './eventHub'
export default {
data () {
return {
info: ''
}
},
created: function () {
eventHub.$on('toBrother', this.toBrother)
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy: function () {
eventHub.$off('toBrother', this.toBrother)
},
methods: {
toBrother (res) {
this.info = res
}
}
}
</script>
<style lang="less">
</style>
方法三
关键词:Vuex
关于Vuex,我会有一个详细的介绍。链接稍后会贴在下面 vuex