vue父子兄弟之间的组件通信

vue组件通信的方式

动态处理事件

父组件

<operate 
	@onOperate="handleOperate"
></child>

methods: {
    handleOperate(e) {
      let id = e.target.id;
      let handle = this[`handle${id}`];
      handle && handle();
    },
    handleModify() {
      console.log("modify=编辑");
    },
    handleAdd() {
      console.log("add == 添加");
    },
    handleDelete() {
      console.log("delete == 删除");
    }
  },

子组件operate

<div class="wrapper">
   <a href="javascript:;" id="Modify" @click="$emit('onOperate',$event)">编辑</a>
    <a href="javascript:;" id="Add" @click="$emit('onOperate',$event)">添加</a>
    <a href="javascript:;" id="Delete" @click="$emit('onOperate',$event)">删除</a>
</div>

父子组件通信

父组件：father.vue

<template>
  <div class="father">
    <h1>父组件</h1>

    <!-- 父组件 接收 子组件的数据 -->
    <p :style="{ fontSize: fontsize + 'px', color: setColor }">
      改变颜色和字体大小
    </p>

    <!-- 父组件 传值 子组件 -->
    <child-f :msg="content" @sendMsg="handle($event)"></child-f>

    <hr />
  </div>
</template>

<script type="text/javascript">

// 引入子组件
import childF from './son'

export default {
  data () {
    return {
      content: '父组件传递的数据',
      fontsize: 5,
      setColor: 'orange'
    }
  },
  components: {
    childF
  },
  methods: {
    handle (val) {
      console.log('子组件传递的数据：', val);
      this.fontsize += val
      this.setColor = 'red'
    }
  }
}
</script>

子组件：son.vue

<template>
  <div class="">
    <h1>son子组件</h1>
    <button @click="click">点击</button>
    <p>子组件页面：{{ msg }}</p>
  </div>
</template>

<script type="text/javascript">
export default {
  props: ['msg'],
  data () {
    return {

    }
  },
  methods: {
    click () {
      this.$emit('sendMsg', 5)
    }
  }
}
</script>

兄弟组件通信的三种方式

方式一: 子-父-子

需求：子组件1 传值 子组件2

原理：通过子组件1 传值 父组件，然后父组件 传值 子组件2 ，从而实现：子组件1 传值 子组件2

父组件：parent.vue

<template>
  <div class="">
    <h1>父组件</h1>
    <p>name: {{ name }}</p>
    <hr />
    <Child1 :name="name" @ChildOneClick="handleParentClick" />
    <hr />
    <Child2 :name="name" />
  </div>
</template>

<script type="text/javascript">

// 引入子组件
import Child1 from './child1';
import Child2 from './child2';

export default {
  data () {
    return {
      name: '学习编程'
    }
  },
  methods: {
    handleParentClick (val) {
      this.name = val;
    }
  },
  components: {
    Child1,
    Child2
  }
}
</script>

子组件1：child1.vue

<template>
  <div class="">
    <h1>子组件1</h1>
    <p>name: {{ myName }}</p>
    <button @click="handle">按钮</button>
  </div>
</template>

<script type="text/javascript">

export default {
  data () {
    return {
      myName: 'child1'
    }
  },
  props: ['name'],
  methods: {
    handle () {
      this.$emit('ChildOneClick', '自学HTML')
    }
  }
}
</script>

子组件2：child2.vue

<template>
  <div class="">
    <h1>子组件2</h1>
    <p>name: {{ name }}</p>
  </div>
</template>

<script type="text/javascript">

export default {
  props: ['name'],
  data () {
    return {

    }
  }
}
</script>

方式二： eventBus

main.js

// 创建中间事件eventBus
Vue.prototype.eventBus = new Vue();

parent.vue

<template>
  <div class="">
    <h1>父组件</h1>
    <p>name: {{ name }}</p>
    <hr />
    <Child1 :name="name" />
    <hr />
    <Child2 :name="name" />
  </div>
</template>

<script type="text/javascript">

// 引入子组件
import Child1 from './child1';
import Child2 from './child2';

export default {
  name: 'Parent',
  data () {
    return {
      name: '学习编程'
    }
  },
  components: {
    Child1,
    Child2
  }
}
</script>

child1.vue

<template>
  <div class="">
    <h1>子组件1</h1>
    <p>name: {{ myName }}</p>
    <button @click="handle">按钮</button>
  </div>
</template>

<script type="text/javascript">

export default {
  name: 'Child1',
  data () {
    return {
      myName: 'child1'
    }
  },
  props: ['name'],
  methods: {
    handle () {
      // 发送消息
      this.eventBus.$emit('ChildOneClick', '自学Vue')
    }
  }
}
</script>

child2.vue

<template>
  <div class="">
    <h1>子组件2</h1>
    <p>name: {{ name }}</p>
  </div>
</template>

<script type="text/javascript">

export default {
  name: 'Child2',
  data () {
    return {
      name: '学习React'
    }
  },
  mounted () {
    // 接收消息
    this.eventBus.$on('ChildOneClick', (data) => {
      console.log('child2接收参数', data);
      this.name = data;
    })
  }
}
</script>

方式三： vuex

需求：子组件1 传值 子组件2

安装插件：npm i vuex --save

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    name: 'HTML + CSS + JS'
  },
  mutations: {
    changeName (state, val) {
      state.name = val
    }
  },
  actions: {

  }
})

export default store;

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 引入store
import store from './store/index'

Vue.config.productionTip = false

// 创建中间事件eventBus
Vue.prototype.eventBus = new Vue();
// 将store挂载到vue实例
new Vue({
  store,
  router,
  render: h => h(App)
}).$mount('#app')

父组件：parent.vue

<template>
  <div class="">
    <h1>父组件</h1>
    <p>name: {{ name }}</p>
    <hr />
    <Child1 :name="name" />
    <hr />
    <Child2 :name="name" />
  </div>
</template>

<script type="text/javascript">

// 引入子组件
import Child1 from './child1';
import Child2 from './child2';

export default {
  name: 'Parent',
  data () {
    return {
      name: '学习编程'
    }
  },
  components: {
    Child1,
    Child2
  }
}
</script>

子组件：child1.vue

<template>
  <div class="">
    <h1>子组件1</h1>
    <p>name: {{ name }}</p>
    <button @click="handle">按钮</button>
  </div>
</template>

<script type="text/javascript">

export default {
  name: 'Child1',
  data () {
    return {
      myName: 'child1'
    }
  },
  props: ['name'],
  methods: {
    // 触发事件
    handle () {
      this.$store.commit('changeName','mysql')
    }
  }
}
</script>

子组件：child2.vue

<template>
  <div class="">
    <h1>子组件2</h1>
    <p>技术栈: {{ $store.state.name }}</p>
  </div>
</template>

<script type="text/javascript">

export default {
  name: 'Child2',
  data () {
    return {
      name: '学习React'
    }
  }
}
</script>