VUE父子组件传值问题

一.父组件向子组件传递数据

组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。

1.静态props

父组件:
<button msg="hello"></button>
子组件
<template>
  <div>{{msg}}</div>    //输出 hello
</template>
<script>
    props:['msg']   //子组件通过props选项接收父组件传参
</script>

2.动态props(要动态地绑定父组件的数据到子模板的props用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件)

    父组件: <button :msg="hello"></button>

3.单项数据流

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你++不应该在子组件内部改变 prop++ .

二.子组件向父组件传递数据

使用v-on绑定自定义事件,每个Vue实例都实现了事件接口,即:

使用$on(eventName)监听事件

使用$emit(eventName)触发事件

子组件部分:
<template>
    <input v-model="msg" @change="setMsg" />
</template>
<script>
    export default{
      data() {
        return { msg: '' }
      }
      methods: {
        setMsg() {
          this.$emit('tansferUser',this.msg)  //用 $emit 来遍历 transferUser 事件，并返回 this.msg
        }
      }
    }
</script>

transferUser 是一个自定义的事件，功能类似于一个中转，this.msg 将通过这个事件传递给父组件

父组件部分:
<template>
  <login @transferUser = "getMsg"></login>
</template>
//在父组件 App.vue 中，声明了一个方法 getMsg，用 transferUser 事件调用 getMsg 方法，获取到从子组件传递过来的参数 msg

<script>
  import login from '子组件存放路径';
  export default{
    data() {
      return { user:'' }
    },
    components:{
        ligin
    },
    methods: {
      getMsg(msg) { //msg就是从子组件传递过来的参数msg
        this.user = msg;
      }
    }
  }
</script>

三.非父子组件间的通信

使用专门的状态管理模式(vuex)