Vue的组件间通讯(Vuex除外)

Vue中有好几种方法进行组件间通讯，我们这里做个总结

v-bind

v-bind是Vue中用来向子组件传递数据的方法，在Vue中，父组件可以通过v-bind将值以props的形式传递给子组件，然后子组件再从props中用数组的方式取得父组件传给的值

当然，如果不写v-on，直接：开头，也是v-on的意识，这是Vue的一个语法糖

我们尝试在Vue中实现一个父子组件通讯

//需求：我们要在vue中实现一组组件间通讯，父组件Fa给子组件Son传递一个数值num，Son可以通过自身的spend方法对这个值进行修改，并且渲染到页面上，这里给出它的代码
   Fa.vue
<template>
    <div>
      father
      <Son :num="num" :spend="(value)=>{spend(value)}"/>
    </div>
</template>
<script>
    import Son from "./Son";

    export default {
      components:{Son},
      name: "Fa",
      data(){
          return {
            num:100
          }
      },
      methods:{
        spend(value){
          return this.num -= value
        }
      }
    }
</script>
    Son.vue
<template>
  <div>
    son have father's money is {{num}}
    <button @click="spend(10)">spend</button>
  </div>
</template>
<script>
export default {
  props:["num","spend"],
  name: "Son",
}
</script>

效果如图所示：

但是这种方法太过麻烦，Vue给了个语法糖，叫.sync，写法如下给出代码

Fa.vue
<template>
    <div>
      father
      <Son :num.sync="num"/>
    </div>
</template>

Son.vue
<template>
  <div>
    son have father's money is {{num}}
    //其实就是将之前的spend方法合并在了$emit中，并且改了个名字叫做update:xxx，然后后面给出新的值
    <button @click="$emit('update:num',num-10)">spend</button>
  </div>
</template>

上面的是Vue的父子组件，如果组件关系很远怎么办？用provide/inject，这个是它们的用法：

//上述需求微微进行修改，如果是他的孙子组件，我需要num这个值，此时用provide
//父级组件
father{
    export default{
        provide:{
            num:100
        }
    }
}
//子组件
grandSon{
    export default{
        inject:["num"]
    }
}

但是这个方法目前看来有两个缺陷，一个是必须是父组件的子孙后代，第二个是无法将本地的this值作为参数传入。 目前先这样，等学了Vuex再将这个补完