特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
使用Vue构建组件容易,但对于初学者要掌握Vue组件中的通讯还是有一定的难度。比如说,父组件如何向子组件通讯?子组件又是如何向父组件通讯?兄弟组件又是怎么通讯?这些方面都是有关于组件通讯相关的知识。而且掌握Vue组件之间的通讯方式还是掌握Vue组件的另一种能力。
在Vue中,Vue的组件自身就很棒,因为它可以帮助我们使用重用的代码片段,我们也可以使用Vue提供的所有功能。现在我们要掌握怎么建立组件之间的连接,也就是组件的通讯,以便一个组件中的操作可以更新应用程序中的其他组件。在接下来的内容中,咱们会涉及两个部分,第一个部分是父子组件怎么通讯;第二部分兄弟组件怎么通讯?
父子组件通讯
先来看看父子组件之间如何建立通讯:将看到父组件如何向子组件通讯和子组件如何向父组件通讯 ?
父组件向子组件通讯
要在Vue中将数据从父组件传到子组件,我们可以通过 props
来实现。在React中也是使用类似的约定来实现组件之间的数据共享。props
指的是从外部设置的属性,例如来自父组件。为了告诉Vue子组件从自已实例的外部接收数据,需要在子组件的Vue
对象中设置props
属性。这个属性包含一个String
数组,每个字符串表示一个可以从父组件设置的属性。请注意,props
严格用于父组件与子组件之间的单向通讯,并且你不希望尝试直接在子组件中更改props
的值。否则,你将收到类似这样的错误信息“避免直接修改某个prop
,因为当父组件重新渲染时,该值将被覆盖” 这样的错误。相反,根据prop
的值使用data
或computed
。
父组件使用属性绑定
为了将数据从父组件传到子组件,在父组件中设置一个属性,该属性绑定和子组件的prop
相同的名称一个属性值。请注意,我们现在位于父组件内部,但是我们使用了自定义标签<child-card>
来渲染子组件。在这个标记上,我们设置了绑定属性。在下面的示例中,使用parentMessage
作为属性名,所以在子组件中需要一个props: ['parentMessage']
作为一个prop
。然后在父组件中,使用<child-card :parentMessage = "parentMessage"></child-card>
来传递数据。
<!-- ParentCard.vue -->
<template>
<div class="card">
<div class="card-header">
<h5 v-text="theCardTitle"></h5>
<button @click="sendMessage" class="btn">给子组件发送一个消息</button>
</div>
<div class="card-body">
<child-card :parentMessage="parentMessage"></child-card>
</div>
</div>
</template>
<script>
import ChildCard from './ChildCard';
export default {
name: 'ParentCard',
data: () => ({
theCardTitle: '父组件',
parentMessage: ''
}),
components: {
ChildCard
},
methods: {
sendMessage() {
this.parentMessage = `<b>消息来自父组件:</b> (^_^)!!!`
}
}
}
</script>
子组件使用props对象
接下来的代码中,创建一个ChildCard
子组件,它的data
中有一个props
数组,并且设置了一个parentMessage
字符串。这表明parentMessage
可以从外部设置,也可以从父组件设置。这正是我们在上一节中所做的。为prop
提供的字符串名称,在我们的示例中,parentMessage
必须与此组件中模板部分中使用的属性名相匹配。
<!-- ChildCard.vue -->
<template>
<div class="message">
<div class="message-header">
<h5 v-text="theCardTitle"></h5>
</div>
<div class="message-body">
<p class="message-text" v-html="theCardBody"></p>
<div v-if="parentMessage" class="alert" v-html="parentMessage"></div>
</div>
</div>
</template>
<script>
export default {
name: 'ChildCard',
props: ['parentMessage'],
data: () => ({
theCardTitle: '子组件',
theCardBody: '我是一个子组件!(^_^) !!!'
})
}
</script>
上面的两小节中,分别创建了ParentCard
和ChildCard
两个组件,而且子组件ChildCard
嵌套在父组件ParentCard
中。在子组件中,使用了v-if
指令有条件地显示来自父组件ParentCard
的消息,并且显示在div.alert
中。如果没有消息,则不会显示.alert
。因此,当页面首次渲染时,parentMessage
的初始值是一个空字符串(在ParentCard
组件的data
中设置了parentMessage
为空字符串)。所以我们一开始渲染页面的时候,并看不到(ChildCard
子组件不显示.alert
)。当用户点击了ParentCard
组件中的“发送消息”的按钮时,则会触发ParentCard
组件中定义的sendMessage()
方法。这个时候,parentMessage
的值就变成了<b>消息来自父组件:</b> (^_^)!!!
。由于此变量使用:parentMessage="parentMessage"
绑定到<child-card>
标签上,并且子组件ChildCard
通过props:['parentMessage']
接受该值,如此一来,子组件将使用来自父组件的parentMessage
的值。
最终效果如下:
当你点击示例中右上角的按钮,就可以看到父组件向子组件发送的消息,这样就完成了父组件向子组件的数据通讯:
简单的总结一下:
在Vue中,父组件向子组件传递数据(通讯),可以借助
props
属性完成。
可以用一张类似下面这样的图来描述父组件向子组件通讯的关系:
子组件向父组件通讯
事实除了从父组件向子组件传数
如需转载,烦请注明出处:https://www.w3cplus.com/vue/component-communication.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!