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

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}}