#  学习笔记-非父子级传递数据| 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天

前言

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

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中都写明返回相应的属性值，否则会出现如下错误