如有问题请指正,非常感谢。
因为是边学边整理的,每一步都比较详细,所以描述上可能会有些瑕疵。
可以先看评论是否有人指正文章中的错误后再酌情参考。
如有帮助,不胜荣幸。
一:创建项目并实现父子组件,兄弟组件结构
创建项目过程:略
父组件:App.vue
<template>
<div id="app">
<One></One>
<Two></Two>
</div>
</template>
<script>
import One from './components/one.vue'
import Two from './components/two.vue'
export default {
components: {
One, Two
}
}
</script>
<style>
#app {
text-align: center;
margin-top: 60px;
}
</style>
子组件one.vue
<template>
<div class="one">one</div>
</template>
<script>
</script>
<style scope>
.one{
height: 100px;
line-height: 100px;
font-size: 20px;
color: white;
background-color: darkcyan;
}
</style>
子组件two.vue
<template>
<div class="two">two</div>
</template>
<script>
</script>
<style scoped>
.two{
height: 100px;
line-height: 100px;
font-size: 20px;
color: white;
background-color: darkgoldenrod;
}
</style>
App是One和Two的父组件,one和two是兄弟组件
实现前:
二:实现父组件通过props
向子组件传参
目标:在父组件App.vue中向子组件One.vue传递数据
步骤:
- 在父组件中定义变量appData1并赋值
- 父组件通过属性绑定的形式将此变量绑定到要传递的子组件中,即One
- 在子组件中通过props接收该属性,即msg
- 子组件使用该数据
箭头能够体现该数据的传递过程
实现后:
目标:在父组件App.vue中向子组件Two.vue传递数据,同理
实现后:
三:实现子组件通过事件
向父组件传参
目标:子组件One向父组件传递参数
点击子组件One中点击红色字体,父组件中的父组件App.vue中本来的变量
将被替换为 子组件One.vue向父组件传值
子组件可以使用 $emit
触发父组件的自定义事件。
vm.$emit(eventName,[…args])
-
eventName 方法名
-
[…args] 可选参数
触发当前实例上的事件,附加参数都会传给监听器回调。
步骤:
- 在子组件中定义一个事件changeText
- 在changeText中定义一个事件textChanged,当changeText事件执行时,textChanged也被触发
- textChanged被触发后,父组件App执行updatetext方法
- 父组件中的数据被更新
点击前:
点击后:
目标:子组件Two向父组件传递参数,
同理如下图,注意变量名,容易搞混
子组件One的变量名以及事件登用的都是text,
Two用的都是txet(可以用别的,我是实在不想起名字了)
效果
点击前:
点击后:
四:通过$emit
$on
实现任何组件间的通信
这种方法通过一个空的Vue实例作为中央事件总线(事件中心),用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信,包括父子、兄弟、跨级。当我们的项目比较大时,可以选择更好的状态管理解决方案vuex。
$emit
this.$emit
(‘自定义事件名’,要传送的数据);- 触发当前实例上的事件,要传递的数据会传给监听器;
$on
VM.$on
(‘事件名’,callback) —callback回调$emit要传送的数据;- 监听当前实例上自定义事件;
目标:组件One.vue向组件Two.vue传递数据
步骤:
- 新建bus.js,在其中定义一个空的vue实例并在组件One和组件Two中引入
- 在组件One中定义一个事件changeTitle,changeTitle执行时,titleChanged也被触发
- 在组件Two中titleChanged被监听
- 组件Two中的title值被更新
点击前:
点击后:
目标:组件Two.vue向组件One.vue传递数据,同理
点击前:
点击后:
以上内容,如有问题请留言