Vue-组件之间的通信

组件之间的传值基本上prop, emit事件分发，Vuex管理数据这三大基本就是我的全部，还有一些其他的方法就随便瞄了一眼，总觉得够用就好，最近接手的一个项目里面就有我不熟悉的，与此同时明白了一个道理，有时候全面学习一个东西，不只是是为了自己够用，也是为了读懂别人的代码。

1 父组件向子组件传值

父组件：
<template>
  <div>
    <son :list="listData"></son>
  </div>
</template>
<script>
import son from "./components/son"
export default {
  name: 'home',
  data(){
    return{
      listData:['hello','world']
    }
  },
  components:{
    son
  }
}

子组件：
<template>
  <div class="hello">
    <ul>
      <li v-for="(item, index) in list" :key="index">{{item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    list:{          
      type:Array,
      required:true
    }
  }
}
</script>

 

2 子组件向父组件传值(自定义事件从子组件向父组件中传递数据)

父组件：
<template>
  <div>
    <son @sendData="getSonText"></son>
    <p>我接收到了：{{text}}</p>
  </div>
</template>
<script>
import son from "./components/son"
export default {
  name: 'home',
  data(){
    return{
      text: ''
    }
  },
  components:{
    son
  },
  methods: {
    getSonText(text){
      this.text = text
    }
  }
}

子组件：
<template>
  <div>
    <p>子组件,我所拥有的数据： {{ text }}</p>
    <div @click="sendData">发送数据</div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return() {
      text: '来自子组件的数据'
    }
  },
  methods: {
    sendData () {
      this.$emit('sendData', this.text)
    }
  }
}
</script>

 

3 通过ref属性在父组件中直接取得子组件中的数据

父组件：
<template>
  <div>
    <son ref="sonEx"></son>
    <div  @click="getData">得到数据: {{text}}</div>
  </div>
</template>
<script>
import son from "./components/son"
export default {
  name: 'home',
  data(){
    return{
      text: ''
    }
  },
  components:{
    son
  },
  methods: {
     getData () {
        this.text= this.$refs.sonEx.texting;
      }
  }
}

子组件：
<template>
  <div>
    <p>子组件,我所拥有的数据： {{ texting }}</p>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return() {
      texting: '来自子组件的数据'
    }
  }
}
</script>

 

4 通过sync实现数据双向绑定， 从而同步父子组件数据

父组件：
<template>
  <div>
    <son :wisdom.sync="text"></son>
    <div>得到数据: {{text}}</div>
  </div>
</template>
<script>
import son from "./components/son"
export default {
  name: 'home',
  data(){
    return{
      text: 1
    }
  },
  components:{
    son
  }
}

子组件：
<template>
  <div>
    <p style="color:green">子组件： {{ wisdom }}</p>
    <div @click="controlData">同步</div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    wisdom: Number,
  },
  data () {
    return {}
  },
  methods: {
      controlData() {
         let newValue = this.wisdom + 1
         this.$emit("update:wisdom", newValue)
      }
  }
}
</script>

 

5 状态管理Vuex

1)   什么是vuex?
Vuex是一个专为Vue.js应用程序开发的状态管理模式。
采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2)  应用场景
vuex只能用于单个页面中不同组件（例如兄弟组件）的数据流通

3)  核心内容

vuex中，有默认的五种基本的对象：

• state：存储状态（变量）
• getters：对数据获取之前的再次编译，可以理解为state的计算属性。
• mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
• actions：异步操作。在组件中使用是$store.dispath('')
• modules：store的子模块，为了开发大型项目，方便状态管理而使用的。

补充：mapGetters、mapActions
很多时候 , $store.state.dialog.show 、$store.dispatch('switch_dialog') 这种写法又长又臭 , 很不方便 , 我们没使用 vuex 的时候 , 获取一个状态只需要 this.show , 执行一个方法只需要 this.switch_dialog 就行了 , 使用 vuex 使写法变复杂 ，具体使用方法参考官网。

Vuex使用案例： https://github.com/yang1212/test-demo.git