vue 父子组件之间数据传递与同步

父子组件之间是不能够使用 v-model 来绑定值的，因为如果有子组件中修改值，而无法同步到父组件的，所以如果使用 v-model 来绑定，vue 会报错：

vue.esm.js?efeb:591 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten w......

但是我又想要在父组件控制子组件中的变量，也就是子组件可以回调父组件中的指定函数，就需要使用下面的方法。（这种是我尝试过可以使用的，不知道有没有其他方法，我学后端的对前端没有很深入了解）

子组件 LoginComponent.vue

子组件中，主要步骤：

• 定义变量
• 监听变量（子组件变量），调用父组件的设置变量（父组件的变量）方法。

<template>
  <div id="login-box">
    <input type="text" v-model="account" /> <br />

    <input type="button" value="登录" @click="login" />
  </div>
</template>

<script>
export default {
  data(){
    return {
      account:''
    }
  },
  methods:{
    login(){
      // 调用父组件的 login() 函数 如果要传递参数，跟在后面即可
      this.$emit("login")
    }
  },
  watch:{
    //监听 account 的值，如果发生改变，就调用父组件的 set_account() 函数
    account(newValue, oldValue){
      this.$emit("set_account", newValue);
    }
  }
}
</script>

父组件 LoginPage.vue

父组件，主要步骤：

• 使用子组件标签处绑定函数
• 定义变量
• 提供设置变量的函数，供子组件回调，函数名在标签绑定函数的时候告诉了子组件。

<template>
    <div id="login-page-box">
      <div class="login-page-login-box">

        <!-- 绑定 login()  和 set_account(newValue) 函数 -->
        <login-component
          @login="login"
          @set_account="set_account">
        </login-component>

      </div>

    </div>
</template>

<script>
  import LoginComponent from '../login/LoginComponent'
  export default {
    data(){
      return {
        account:''
      }
    },
    methods:{
      set_account(newValue){   //提供给子组件调用  保证父子组件值同步
        this.login_component_account = newValue;
      }
      login(){  //登录函数  提供给子组件调用 
        console.log("调用了父组件的login()函数，父组件的 account =" + this.account)
      }
    },
    components:{
      'login-component': LoginComponent
    }
  }

</script>

上面只是演示了一个变量的，多个变量类推即可。