VUE中一个组件如何修改另一个组件的属性？

Question

现有组件A、B，在组件B的changeName()方法中如何能修改组件A中的name属性？

补充：组件A、B关系为平级

---

组件A

<template>
    <div>
        <h1>{{name}}</h1>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                name: "张三"
            }
        }
    }
</script>

组件B

<template>
    <div>
        <button @click="changeName">修改</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                
            }
        },
        method: {
            changeName(){}
        }
    }
</script>

Answer 1

在A组件中定义一个可以修改name的方法changeName(txt){ this.name = txt }，然后在B组件中通过$parent或者$children或者$refs找到A组件（不知你的代码里A、B组件是什么关系）调用A组件里的changeName方法，例如 this.$refs["A"].changeName('赵四')

Answer 2

vuex bus vue-router 本地存储 refs 等方式都可以

Answer 3

首先你的确定你2个组件的关系，
如果是父子关系，那么一般采用 $emit][1]和 [$on的方式
如果是（子孙跨级）关系，那么可以用provide 和 inject 参考：provide / inject
如果是平级关系或者没有任何关系，那么可以用 event bus或者本地存储(localstorage)

当然还有终极方案：vuex

Answer 4

在入口函数可以定义一个全局事件

Vue.prototype.information = new Vue()

在要发送数据的组件用$emit来发送数据

this.information.$emit("totalData", this.proList)

在接收数据的组件用$on来接收数据

 this.information.$on("totalData", msg => {
        this.proList = msg
      })

也可以自定义一个JS文件，就不用在全局定义这个事件。不过在引用这个js的组件中那个必须引用
不过可以的话最好用vuex，能省去很多麻烦