vue兄弟组件之间传值和方法调用

1.兄弟组件相互传值

1.1 vuex传值

实现效果：兄弟组件之间传值，child1的值发生变化，child2值也能随之发生变化

子组件一代码，child1.vue,点击button，连接store.js mutations中的changeTitle事件，进行更改值

<template>
  <div>
     <input type="text"v-model="title"/>
      <button type="button" @click="handleClickChangeTitle(title)">更改title的值</button>
    <div>{{title}}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: ""
    };
  },
  methods: {
    handleClickChangeTitle(title){
        this.$store.commit("changeTitle",title)
    }
  }
}
</script>

子组件二代码：child2.vue直接显示store.js中state中的值即可

<template>
  <div>{{$store.state.title}}</div>
</template>

store.js代码，

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    title: ""
  },
  mutations: {
    changeTitle(state, title) {
      state.state = title;
    }
  }
});

1.2 $emit传值，props接收

使用$emit将child1.vue的值给父组件，父组件将值传给child2.vue,child2.vue使用props接收

parent.vue

<template>
  <div>
     <h2>我是父组件</h2>
     <child1 @handleClickChange="handleClickChangeTitle"></child1>
     <child2 :ptitle="title"></child2>
  </div>
</template>
<script>
import child1 from "child1";//文件地址
import child2 from "child2";//文件地址
export default {
  data() {
    return {
      title: ""
    };
  },
  components: {
    child1,
    child2
  },
  methods: {
    handleClickChangeTitle(title){//将改方法传递给child1组件
        this.title = title
    }
  }
}
</script>

child1.vue

<template>
  <div>
     <h2>我是child1组件</h2>
     <div>
     <input type="text"v-model="title"/>
      <button type="button" @click="handleClickChangeTitle(title)">更改title的值</button>
    <div>{{title}}</div>
  </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: ""
    };
  },
  methods: {
    handleClickChangeTitle(title){
        this.$emit("handleClickChange",title)//连接父组件的handleClickChange方法，同时将值传递给父组件
    }
  }
}
</script>

child2.vue

<template>
  <div>{{ptitle}}</div>
</template>
<script>
export default {
//接收父组件穿过来的值ptitle
 props:{ptitle:{ type: String}}
}
</script>

1.兄弟组件相互调用方法

父组件代码

<template>
  <div>
     <h2>我是父组件</h2>
     <child1 @handleClickChange="handleClickChangeTitle"></child1>
     <child2 ref="changeTitle"></child2>
  </div>
</template>
<script>
import child1 from "child1";//文件地址
import child2 from "child2";//文件地址
export default {
  data() {
    return {
      title: ""
    };
  },
  components: {
    child1,
    child2
  },
  methods: {
    handleClickSearch() {
      //header组件和home组件相互通信
      this.$refs.changeTitle.changeTitle();
    }
  }
}
</script>

child1.vue代码

<template>
  <div>
     <h2>我是child1组件</h2>
     <div>
     <input type="text"v-model="title"/>
      <button type="button" @click="handleClickChangeTitle(title)">更改title的值</button>
    <div>{{title}}</div>
  </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: ""
    };
  },
  methods: {
    handleClickChangeTitle(title){
        this.$emit("handleClickChange",title)//连接父组件的handleClickChange方法，同时将值传递给父组件
    }
  }
}
</script>

child2.vue代码

<template>
  <div></div>
</template>
<script>
export default {
  methods: {
    changeTitle() {
      console.log("我是child2组件，changeTitle方法由child1组件触发")
    }
  }
}
</script>

后期继续更新！