在
Vue 中，组件间的传值可以通过 `props`、`$emit`、`$parent`、`$children`、`$attrs`、`$listeners` 等方式进行。
1.
父子组件之间的传值：
父组件可以通过 `props` 向子组件传递数据，子组件可以通过 `$emit` 触发事件向父组件传递数据。
例如，父组件向子组件传递一个名字：
```html
<template>
<div>
<child-component :name="name" @change-name="changeName"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.
vue'
export default {
components: {
ChildComponent
},
data () {
return {
name: '
Vue'
}
},
methods: {
changeName (newName) {
this.name = newName
}
}
}
</script>
```
子组件接收父组件传递的数据，并通过 `$emit` 触发事件向父组件传递数据：
```html
<template>
<div>
<p>父组件传递的名字：{{ name }}</p>
<button @click="changeName">修改名字</button>
</div>
</template>
<script>
export default {
props: {
name: String
},
methods: {
changeName () {
this.$emit('change-name', '
Vue.js')
}
}
}
</script>
```
2. 子父组件之间的传值：
子组件可以通过 `$parent` 访问父组件的数据和方法，并通过 `$emit` 触发事件向父组件传递数据。
例如，子组件向父组件传递一个消息：
```html
<template>
<div>
<button @click="sendMessage">发送消息</button>
</div>
</template>
<script>
export default {
methods: {
sendMessage () {
this.$parent.showMessage('Hello,
Vue.js')
}
}
}
</script>
```
父组件接收子组件传递的数据，并展示消息：
```html
<template>
<div>
<p>{{ message }}</p>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.
vue'
export default {
components: {
ChildComponent
},
data () {
return {
message: ''
}
},
methods: {
showMessage (message) {
this.message = message
}
}
}
</script>
```
3. 非
父子组件之间的传值：
非
父子组件之间的传值可以通过一个空的
Vue 实例作为中央事件
总线（Event
Bus）来实现。
首先，创建一个空的
Vue 实例：
```
javascript
// Event
Bus.js
import
Vue from '
vue'
export default new
Vue()
```
然后，在需要传递数据的组件中，通过 `import` 引入 Event
Bus，并使用 `$emit` 触发事件：
```html
<template>
<div>
<button @click="sendMessage">发送消息</button>
</div>
</template>
<script>
import Event
Bus from './Event
Bus'
export default {
methods: {
sendMessage () {
Event
Bus.$emit('message', 'Hello,
Vue.js')
}
}
}
</script>
```
最后，在接收数据的组件中，也通过 `import` 引入 Event
Bus，并使用 `$on` 监听事件：
```html
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
import Event
Bus from './Event
Bus'
export default {
data () {
return {
message: ''
}
},
created () {
Event
Bus.$on('message', (message) => {
this.message = message
})
}
}
</script>
```
这样，就可以实现非
父子组件之间的传值了。
本文详细介绍了Vue.js中父子组件间的通信方法，包括父组件如何向子组件传递数据，子组件如何将值回传给父组件，以及如何利用bus总线实现组件间通信。同时，提到了props类型的使用，以及在通信过程中避免直接修改父组件数据的注意事项。
最低0.47元/天 解锁文章
1734
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
