【Vue】学习笔记-非父子级传递数据

前言

组件之间的传值可以分为三种：

1.父级向子集传递数据

2.子级向父级传递数据

3.非父子级传递数据

本文主要讲解非父子级传递数据

非父子级传递数据

在编写项目组件过程中，使用store.js管理非父子级间的数据，相当于建立一个类似于全局变量的store来管理非父子级之间的关系，创建sister和brother两个平级组件，在App组件中同时引入两个组件

store.js如下

export default {
    //状态
    state:{
        message:"hello vue"
    },
    setStateMessage(str){
        this.state.message = str;
    }
}

当brother和sister都导入store后，两个平级的组件都可以通过在template标签中引用state的任何信息如用state.message来显示"hello vue"。brother组件中添加一个按钮，通过setStateMessage改变store的属性值，当store中的属性发生变化时，sister和brother中的store相关的属性都会发生变化

brother代码如下：

<template>
  <div>
      <h1>brother  <button @click="changData" >改变数据</button></h1>
      <p>{{state.message}}</p>
  </div>
</template>

<script>
import store from "../store"
export default {
    data(){
        return{
            state:store.state
        }
    },
    methods: {
        changData(){
            store.setStateMessage("brother data")
        }
    },
}
</script>

sister如下：

<template>
  <div>
      <h1>sister</h1>
      <p>{{state.message}}</p>
  </div>
</template>

<script>
import store from "../store"
export default {
    data(){
        return{
            state:store.state
        }
    }
}
</script>

显示结果：

点击改变数据后，store中的数据改变，hello vue 都变成brother data

常见错误总结

当两个非父子级的组件使用同一个store.js时，虽然导入store后操作一个组件就可以通过store.js来改变另一个，但是在开始编写时，必须brother和sister两个组件都要导入store，并且在data中都写明返回相应的属性值，否则会出现如下错误