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

朴灿烈づ我的快乐病毒、 2023-07-02 03:20 18阅读 0赞

父子组件之间是不能够使用 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-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>

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