组件传值
vue组件之间的传值大致分为三种：父组件给子组件传值，子组件给父组件传值，兄弟组件之间传值 本文主要介绍vue组件之间简单的数据传递，如果组件之间传递的数据比较复杂，建议使用vue的状态管理模式 vuex
父组件给子组件传值
1.父组件通过props给子组件传值
props 就是父组件给子组件标签上定义的属性，用来接收父组件传递的数据，props 的值可以是字符串数组，也可以是各自的名称和类型，用法和 data 中的数据用法一样，在子组件中只能使用该值，不能修改
父组件vue文件：
<template>
<div>
//父组件自定义msg属性给子组件传值
<Child :msg="msg"></Child>
</div>
</template>
<script>
import Child from "@/components/Child"
export default {
data() {
return {
msg: "父组件传给子组件的值"
}
},
components: {
Child
}
}
</script>
<style scoped>
</style>
复制代码子组件vue文件：
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
//子组件通过props接收父组件的传值
props: ["msg"],
data() {
return {
}
}
}
</script>
<style scoped>
</style>
复制代码2.父组件通过$ref给子组件传值
ref 用于给元素或子组件注册引用信息，引用信息将会注册在父组件的 refs对象上，父组件通过refs 对象上，父组件通过 refs对象上，父组件通过ref 获取到在子组件里定义的属性和方法，通过调用方法给子组件传递数据
父组件vue文件：
<template>
<div>
<Child ref="child"></Child>
</div>
</template>
<script>
import Child from "@/components/Child"
export default {
data() {
return {
msg: "父组件传给子组件的值"
}
},
mounted() {
//父组件通过ref属性调用子组件的方法
this.$refs.child.getMsg(this.msg)
},
components: {
Child
}
}
</script>
<style scoped>
</style>
复制代码子组件vue文件：
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
data() {
return {
msg: "
}
},
methods: {
//子组件获取父组件值的方法
getMsg(val) {
this.msg = val
}
}
}
</script>
<style scoped>
</style>
复制代码3.父组件通过$children给子组件传值
children为当前组件的直接子组件，是一个无序的数组，父组件通过children 为当前组件的直接子组件，是一个无序的数组，父组件通过 children为当前组件的直接子组件，是一个无序的数组，父组件通过 children 访问子组件并传递数据，$ children 并不保证顺序，也不是响应式的，如果能清楚的知道子组件的顺序，可以使用下标来操作对应的子组件
父组件vue文件：
<template>
<div>
<Child ref="child"></Child>
</div>
</template>
<script>
import Child from "@/components/Child"
export default {
data() {
return {
msg: "父组件传给子组件的值"
}
},
mounted() {
//父组件通过$children[0]访问对应子组件
this.$children[0].msg = this.msg
},
components: {
Child
}
}
</script>
<style scoped>
</style>
复制代码子组件vue文件：
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
data() {
return {
msg: ""
}
}
}
</script>
<style scoped>
</style>
复制代码4.父组件通过provide/inject给子孙组件传值
provide/inject 组合以允许一个祖先组件向其所有子孙后代组件注入一个依赖（属性和方法），不论组件层次有多深，并在其上下游关系成立的时间里始终生效，从而实现跨级父子组件通信，主要在开发高阶插件/组件库时使用
父组件vue文件：
<template>
<div>
<Child></Child>
</div>
</template>
<script>
import Child from "@/components/Child"
export default {
data() {
return {
}
},
//父组件通过provide方法向子孙组件提供值
provide() {
return {
msg: "父组件提供给子孙组件的值"
}
},
components: {
Child
}
}
</script>
<style scoped>
</style>
复制代码子孙组件vue文件：
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
//子孙组件通过inject注入父组件提供的值
inject: ['msg'],
data() {
return {
}
}
}
</script>
<style scoped>
</style>
复制代码props和$ref和$children和provide/inject的主要区别：
- props 侧重于数据的传递，并不能获取子组件里的属性和方法，适用于自定义内容的使用场景
- $ref 侧重于获取子组件里的属性和方法，并不是太适合传递数据，并且 ref 常用于获取dom元素，起到选择器的作用
- $children 侧重于获取所有的直接子组件，得到的是一个无序的数组，并不太适合向多个子组件传递数据
- provide/inject 侧重于在开发高阶插件/组件库时使用，并不推荐用于普通应用程序代码中
子组件给父组件传值
1.子组件通过触发$emit事件给父组件传值
$emit 的第一个参数为自定义的事件，第二个参数为要传递给父组件的值，父组件在子组件标签上绑定自定义事件来接收子组件传递的数据
子组件vue文件：
<template>
<div>
<button @click="sendMsg">子组件传值给父组件</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "子组件传给父组件的值"
}
},
methods: {
//子组件通过$emit触发自定义事件给父组件传值
sendMsg() {
this.$emit("getMsg", this.msg);
}
}
}
</script>
<style scoped>
</style>
复制代码父组件vue文件：
<template>
<div>
//父组件通过绑定自定义事件接收子组件的传值
<Child @getMsg="getData"></Child>
<p>{{msg}}</p>
</div>
</template>
<script>
import Child from "@/components/Child";
export default {
data() {
return {
msg: ""
}
},
methods: {
getData(data) {
this.msg = data
}
},
components: {
Child
}
}
</script>
<style scoped>
</style>
复制代码2.子组件通过$parent给父组件传值
$parent 可以用来从一个子组件访问父组件并传递数据
子组件vue文件：
<template>
<div>
<button @click="sendMsg">子组件传值给父组件</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "子组件传给父组件的值"
}
},
methods: {
//子组件通过$parent访问父组件
sendMsg() {
this.$parent.msg = this.msg
}
}
}
</script>
<style scoped>
</style>
复制代码父组件vue文件：
<template>
<div>
<Child></Child>
<p>{{msg}}</p>
</div>
</template>
<script>
import Child from "@/components/Child";
export default {
data() {
return {
msg: ""
}
}
components: {
Child
}
}
</script>
<style scoped>
</style>
复制代码兄弟组件之间传值
兄弟之间传值通过eventBus
eventBus 就是一个vue实例来作为全局的事件总线，兄弟组件之间通过 eventBus. on和eventBus.on 和 eventBus. on和eventBus.emit 注册触发事件来传递数据
新建一个vue实例 eventBus.js
import Vue from "vue"
export default new Vue()
复制代码父组件vue文件：
<template>
<div>
//子组件A
<ChildA></ChildA>
//子组件B
<ChildB></ChildB>
</div>
</template>
<script>
</script>
<style scoped>
</style>
复制代码子组件A vue文件：
<template>
<div>
<button @click="sendMsg">子组件A传值给子组件B</button>
</div>
</template>
<script>
import eventBus from '../eventBus.js'
export default {
data() {
return {
msg: "子组件A传给子组件B的值"
}
},
methods: {
sendMsg() {
//子组件A通过eventBus.$emit触发自定义事件给子组件B传值
eventBus.$emit("getMsg", this.msg);
}
}
}
</script>
<style scoped>
</style>
复制代码子组件B vue文件：
<template>
<div>
{{msg}}
</div>
</template>
<script>
import eventBus from '../eventBus.js'
export default {
data() {
return {
msg: ""
}
},
created() {
this.getData()
},
methods: {
getData() {
//子组件B通过eventBus.$on注册自定义事件接收子组件A的传值
eventBus.$on("getMsg", (data) => {
this.msg = data
})
}
}
}
</script>
<style scoped>
</style>本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读