1 初始项目

 npm run serve

http://localhost:8080/

2 课件

3 父组件向子组件共享数据---自定义属性

 props中的数据建议不要直接修改(容易报错)，要想修改，建议转存到data中再改

4 子组件向父组件共享数据---自定义事件

5 兄弟组件间的数据共享---EventBus

 Left.vue发送，Right.vue接收

6 源码

<template>
<div class="app-container">
    <h1>App 根组件h1>
    <p>userinfo的值是：{{userinfo}}p>
    <p>countFromSon的值是：{{countFromSon}}p>
    <hr>
    <div class="box">
        <Left :msg="message" :user="userinfo">Left>
        
        <Right @numChange="getNewCount">Right>
    div>
div>
template>

<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'

export default {
    data(){
        return{
            message: 'hello',
            userinfo: {
                name: 'wsc',
                age: 18
            },
            countFromSon: 0, // 定义 countFromSon 来接收子组件Right传递过来的数据count
        }
    },
    components: {
        Left,
        Right
    },
    methods: {
        getNewCount(val){
            console.log('numChange 事件被触发了！count值：', val)
            this.countFromSon = val //完成传递
        }
    }
}
script>


<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
style>

<template>
<div class="left-container">
    <h3>Left 组件h3>
    <p>msg的值是：{{msg}}p>
    <p>user的值是：{{user}}p>
    <button @click="msg = 'abc'">修改msgbutton> 
    <button @click="user = {address:'qingdao'}">修改userbutton> 
    <button @click="user.name = 'zs'">修改user的原属性namebutton> 
    <hr>
    <button @click="send">好诗好诗，分享给兄弟Rightbutton>
div>
template>

<script>
import bus from '@/components/eventBus.js'
export default {
    props: ['msg', 'user'],
    data(){
        return{
            str: '九分人间烟火，一点真如本心'
        }
    },
    methods: {
        send(){
            //通过$emit触发兄弟组件Right中定义的事件share
            bus.$emit('share', this.str)
        }
    }
}
script>


<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
style>

<template>
<div class="right-container">
    <h3>Right 组件h3>
    <p>count的值: {{count}}p>
    <button @click="count += 1">+1button>
    <button @click="add">+1button>
    <hr>
    <p>兄弟组件Left发来的消息：{{msgFromLeft}}p>
div>
template>

<script>
import bus from '@/components/eventBus.js'
export default {
    data(){
        return{
            count: 0, //子组件Right自己的数据，期望将其传递给父组件App
            msgFromLeft: '',
        }
    },
    methods: {
        add(){
            this.count += 1,
            /*
            @是vue中v-on的简写，@click等时vue中的事件
            此处numChange是自定义事件名称，@numChange是自定义事件
            this.count是实参；父组件接收函数getNewCount(val)中的val是对应的形参
            修改数据时，通过$emit触发自定义事件
            */
           this.$emit('numChange', this.count)
        }
    },
    created(){
        bus.$on('share', (val)=>{
            console.log('在Right组件中通过$on定义的事件share被兄弟组件Left触发了！', val)
            this.msgFromLeft = val
        })
    }
}
script>

<style lang="less">
.right-container {
  padding: 0 20px 20px;
  background-color: lightskyblue;
  min-height: 250px;
  flex: 1;
}
style>

import Vue from 'vue'

export default new Vue()

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')