在vue项目中实现组件间传参

如有问题请指正，非常感谢。
因为是边学边整理的，每一步都比较详细，所以描述上可能会有些瑕疵。
可以先看评论是否有人指正文章中的错误后再酌情参考。
如有帮助，不胜荣幸。

一：创建项目并实现父子组件，兄弟组件结构

创建项目过程：略
父组件：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传递数据

步骤：

1. 在父组件中定义变量appData1并赋值
2. 父组件通过属性绑定的形式将此变量绑定到要传递的子组件中，即One
3. 在子组件中通过props接收该属性，即msg
4. 子组件使用该数据
   
   箭头能够体现该数据的传递过程

实现后：

目标：在父组件App.vue中向子组件Two.vue传递数据,同理

实现后：

三：实现子组件通过事件向父组件传参

目标：子组件One向父组件传递参数

点击子组件One中点击红色字体，父组件中的父组件App.vue中本来的变量 将被替换为 子组件One.vue向父组件传值

子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit(eventName,[…args])

• eventName 方法名

• […args] 可选参数

触发当前实例上的事件，附加参数都会传给监听器回调。

步骤：

1. 在子组件中定义一个事件changeText
2. 在changeText中定义一个事件textChanged，当changeText事件执行时，textChanged也被触发
3. textChanged被触发后，父组件App执行updatetext方法
4. 父组件中的数据被更新

点击前：

点击后：
目标：子组件Two向父组件传递参数，
同理如下图，注意变量名，容易搞混
子组件One的变量名以及事件登用的都是text，
Two用的都是txet（可以用别的，我是实在不想起名字了）

效果
点击前：

点击后：

四：通过$emit $on实现任何组件间的通信

这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex。

$emit

1. this.$emit（‘自定义事件名’,要传送的数据）；
2. 触发当前实例上的事件，要传递的数据会传给监听器；

$on

1. VM.$on(‘事件名’,callback) —callback回调$emit要传送的数据；
2. 监听当前实例上自定义事件；

目标：组件One.vue向组件Two.vue传递数据

步骤：

1. 新建bus.js,在其中定义一个空的vue实例并在组件One和组件Two中引入
2. 在组件One中定义一个事件changeTitle,changeTitle执行时，titleChanged也被触发
3. 在组件Two中titleChanged被监听
4. 组件Two中的title值被更新

点击前：

点击后：

目标：组件Two.vue向组件One.vue传递数据,同理

点击前：

点击后：

以上内容，如有问题请留言