vue2组件通信（1）

兄弟组件传值 ：

BusEevent 中央事件总线：

Bus.$emit('send', this.ceshi.obj) Bus.$on('send', this.ceshi.obj)

Bus.$off('send')

父 :

子 :props:["info", "attrvalue"]

Object.defineProperty 实现数据响应式

在访问对象或修改对象的值得时候调用Object.defineProperty的getter和setter

在为对象添加新属性的时候，却无法触发事件属性的拦截

解决方案

Vue.set(target, PropertyName/index, value)

Object.assgin(target, Property)

$forcecUpdated() ----强制

创建EventBus（兄弟间通信）

import Vue from "vue";
const Bus = new Vue
export default Bus;

父组件

<template>
    <div>
        <PageOne :info="info" attr-value="HELLO"/>
        <PageTwo/>
    </div>
</template>

<script>
import PageOne from './PageOne.vue';
import PageTwo from './PageTwo.vue';
export default {
    components:{
        PageOne,
        PageTwo
    },
    data() {
        return {
            info:
            {
                name: 'gjh',
                lover: 'hyk'
        }
        }
    },
}
</script>

<style lang="less" scoped>
    div{
        span{

            width: 400px;
            height: 100px;
            background-color: green
        }
    }
</style>

子组件PageOne PageTwo

<template>
    <div>
        <span class="ellipsis">{{this.dataList}}</span>
        <span class="ellipsis2">{{info}}</span>
        <span>{{ attrValue }}</span>
    </div>
  </template>
  <script>
import  Bus  from '../bus'
import Vue from 'vue';
  export default {
    props: ['info','attrValue'],
    data() {
      return {
        dataList:'',
      };
    },
    mounted() { 
    },
    watch: {},
    created() {
        Bus.$on('send', data => {
            this.dataList = data
        })
        Bus.$on('close',(len) => {
            console.log(JSON.stringify(this.dataList))
            this.dataList = 
                JSON.stringify(this.dataList) === JSON.stringify({name: 'hyk',lover: 'gjh'}) 
                || JSON.stringify(this.dataList) === len 
                || JSON.stringify(this.dataList) === '{}' 
                ? 
                ' ' : {name: 'hyk',lover: 'gjh'}
            // this.$forceUpdate()
    })
    },
    methods: {
        close() {
            this.dataList = '',
            console.log(this.dataList)
        }
    },
    }
  </script>
  <style lang="less" scoped>
    div {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      width: 400px;
      height: 150px;
      background-color: rgb(160, 168, 189);
    }

    .ellipsis {
      width: 100%;
      height: 257px;
      background-color: rgb(224, 129, 12);
      display: flex; /* 使用 Flexbox 布局 */
      align-items: center; /* 垂直居中对齐子元素 */
      overflow: hidden;
      text-overflow: hidden;
      white-space: normal;
    }

    .ellipsis2 {
      height: 43px;
      width: 100%;
      background-color: bisque;
      display: flex; /* 使用 Flexbox 布局 */
      align-items: center; /* 垂直居中对齐子元素 */
      overflow: hidden;
      text-overflow: hidden;
      white-space: normal;
    }
    </style>

<template>
    <div>
        <button @click="tips">提示</button>
        <button style="align-items:end;" @click="tips1">消除</button>
    </div>       
    </template>
     
    <script>
    import Bus from "../bus";
    export default {

      data() {
        return {
          ceshi: {
            obj: {
              criteriaContent:
                "单位或其直接负责的主管人员、其他直接责任人员犯破坏环境资源保护罪的",
              criteriaId: "169749f7058b472c9ef6cad66c485ef6",
              showContent:
                "单位或其直接负责的主管人员、其他直接责任人员犯破坏环境资源保护罪的",
            },
            type: "adver",
          },
        };
      },
      beforeDestroy(){
        Bus.$off('send')
      },
      methods: {
        tips(){
          Bus.$emit('send', this.ceshi.obj)
        },
        tips1(){
          const len = this.ceshi
          Bus.$emit('close', len)
        },
    }
    }
    </script>
    <style lang="less" scoped>
    div{
        width: 400px;
        height: 100px;
        background-color: aqua;
        display: flex;
        justify-content:space-between;
        align-items: center;
        button{
          margin: 70px;
        }
    }
    </style>