Web前端vue必做笔记之一：组件传值（二）

Web前端vue必做笔记之一：组件传值（二）

非父子级传值
定义一个共享的数据状态(state)

//组件一
<template>
     <div>
         <button @click="changeData">改变数据</button> //改变store.js中的hello vue
         <p>{{state.message}}</p> 
     </div>
</template>

<script>
import store from '../store'
export default {
     data(){
          return{
              state:store.state  
          }
     },
     methods:{
         changeData(){
            store.setSateMessage("brother data"); //把store中的setSateMessage方法中的值进行修改
         }
     }
}
</script>

//组件二
<template>
     <div>
         <p>{{state.message}}</p>
     </div>
</template>

<script>
import store from '../store'
//非父子级传值
export default {
     data(){
          return{
              state:store.state
          }
     }
}
</script>

//App.vue中
<template>
      <div>
           <brother></brother>
           <sister></sister>
      </div>
</template>
<script>
import  Brother from './components/Brother.vue'
import  Sister from './components/Sister.vue'
export default {
       components:{
            Brother,
            Sister
       }
 </script>      

同级之间的组件我们建立一个store.js, 用这个store.js来管理非父子之间的数据
实现两个组件中都实现store.js中的’hello vue’,并且可以相互之间操作这个数据

<script>
export default {
     //状态
     state:{
         message:"hello vue"
     },
     //通过这个方法的形式来操作state
    setStateMessage(str){
          this.state.message = str;
    }
}
<script>