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

￡神魔★判官ぃ 2023-01-01 12:59 260阅读 0赞

# vue组件通信的方式 #

## 父子组件通信 ##

> 父组件：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

> 子组件：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>