如何使组件在Vue.js应用程序中进行通信。
Vue中的组件可以通过各种方式进行通信。
道具
第一种方法是使用道具。
父级通过在组件声明中添加参数来“传递”数据:
<template>
<div>
<Car color="green" />
</div>
</template>
<script>
import Car from ‘./components/Car’
export default {
name: ‘App’,
components: {
Car
}
}
</script>
道具是单向的:从父母到孩子。父母每次更改道具时,都会将新值发送给孩子并重新呈现。
反之则不成立,您绝对不应在子组件内部变异道具。
使用事件从孩子与父母沟通
通过事件,您可以从孩子到父母进行交流:
<script>
export default {
name: 'Car',
methods: {
handleClick: function() {
this.$emit('clickedSomething')
}
}
}
</script>
家长可以使用v-on
指令包含在其模板中的组件时:
<template>
<div>
<Car v-on:clickedSomething="handleClickInParent" />
<!-- or -->
<Car @clickedSomething="handleClickInParent" />
</div>
</template>
<script>
export default {
name: ‘App’,
methods: {
handleClickInParent: function() {
//…
}
}
}
</script>
您当然可以传递参数:
<script>
export default {
name: 'Car',
methods: {
handleClick: function() {
this.$emit('clickedSomething', param1, param2)
}
}
}
</script>
并从父级检索它们:
<template>
<div>
<Car v-on:clickedSomething="handleClickInParent" />
<!-- or -->
<Car @clickedSomething="handleClickInParent" />
</div>
</template>
<script>
export default {
name: ‘App’,
methods: {
handleClickInParent: function(param1, param2) {
//…
}
}
}
</script>
使用事件总线在任何组件之间进行通信
使用事件,您不仅限于儿童与父母之间的关系。
您可以使用所谓的活动巴士。
上面我们用过this.$emit
在组件实例上发出事件。
相反,我们可以做的是在更易于访问的组件上发出事件。
this.$root
根组件,通常用于此目的。
您也可以创建专用于此作业的Vue组件,然后将其导入所需的位置。
<script>
export default {
name: 'Car',
methods: {
handleClick: function() {
this.$root.$emit('clickedSomething')
}
}
}
</script>
任何其他组件都可以侦听此事件。您可以在mounted
打回来:
<script>
export default {
name: 'App',
mounted() {
this.$root.$on('clickedSomething', () => {
//...
})
}
}
</script>
备择方案
这就是Vue开箱即用的功能。
当您超出此范围时,可以查看威克斯或其他第三方库。
免费下载我的Vue手册
更多vue教程:
- Vue.js概述
- Vue.js CLI:学习如何使用它
- Vue.js开发工具
- 为Vue开发配置VS代码
- 使用Vue.js创建您的第一个应用
- Vue.js单个文件组件
- Vue.js模板和插值
- Vue.js指令
- Vue.js方法
- Vue.js计算属性
- 使用CSS样式化Vue.js组件
- Vue.js观察者
- Vue方法vs观察者vs计算的属性
- Vue.js过滤器
- Vue.js组件
- Vue.js插槽
- Vue.js组件道具
- Vue.js活动
- Vue.js组件通信
- Vuex,Vue.js状态管理器
- Vue,在另一个组件内部使用一个组件
- Vue,如何使用prop作为类名
- 如何将SCSS与Vue.js单个文件组件一起使用
- 在Vue.js中使用Tailwind
- Vue路由器
- 动态显示Vue组件
- Vue.js备忘单
- 使用Vuex将Vue数据存储到localStorage
- 如何使用Vue动态应用类
- Vue,如何使用v模型
- Vue,为什么数据必须是函数
- Roadmap to become a Vue.js developer in 2020