HMVue4.2【组件间的数据共享】

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>
        <!-- 
            简单类型传递：将父组件App的message复制一份传递给组件Left中的msg
            对象类型传递：传递的是对象的引用，而不是真正的对象实体
                        并不是将对象userinfo传递给组件Left
                        注意"="的作用就是将对象userinfo的引用传递到组件Left中的user 
        -->
        <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'">修改msg</button> <!--报错-->
    <button @click="user = {address:'qingdao'}">修改user</button> <!--报错-->
    <button @click="user.name = 'zs'">修改user的原属性name</button> <!--不报错，但也不推荐-->
    <hr>
    <button @click="send">好诗好诗，分享给兄弟Right</button>
</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">+1</button>
    <button @click="add">+1</button>
    <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')