vue父子组件数据同步,主要就是子组件监听父组件传过来的内容,$emit调用在父组件里的子组件标签的自定义事件


this.$emit('erzi','6666') //第一个参数是在父组件中的emit事件名,第二个参数是传过去的数据,可有可无,根据自己需求。

执行了this.$emit('erzi','6666'),就会调用父组件中子组件标签的@erzi对应的updata()事件,超简单反正

子组件

<template>
  <div>
    <div>这是子组件内容</div>
    <button @click='childrenchange'>改变父组件内容</button>
    这是父组件传过来的内容&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="text" v-model="input2" @keyup='upchange'>
  </div>
</template>
<script>
  export default {
    name:'demo',
    props:['num'],
    data(){
      return {
        input2:''
      }
    },
    methods:{
      upchange(){
        console.log(this.input2);
        this.$emit('erzi',this.input2)
      },
      childrenchange(){
        this.$emit('erzi','666666666666')
      }
    },
    mounted(){
      this.input2 = this.num
    },
    watch:{
      num:{
        handler(val){
          console.log(val);
          this.input2=this.num
        }
      }
    }
  }
</script>
<style scoped>
  
</style>

父组件 

<template>
  <div>
    <div class="demo">
      {{input1}}
      <div>这是父组件</div>
      <!--<input ref="in"  type="text" v-model="input1" @keyup='down'>-->
    </div>
    <div>
      <button @click='change'>改变父组件num值</button>
    </div>
    <br>
    <br>
    
    <br>
    <demo @erzi='update' :num='input1'></demo>
  </div>
</template>
<script>
  import demo from './demo.vue'
  export default {
    name:'index',
    components:{
      demo
    },
    data(){
      return {
        input1:'',
      }
    },
    methods:{
      down(){
        console.log(this.input1);
      },
      change(){
        this.input1='恭喜你,完成了'
      },
      update(val){
        this.input1 = val
      }
    }
  }
</script>
<style scoped>
  .demo{
    font-size: 20px;
  }
  .el-icon-arrow-down{
    font-size:14px;
    /*width: 20px;*/
    /*height: 20px;*/
    transition: 0.4s;
  }
  .zhuan{
    transform: rotate(-180deg);
  }
</style>

以上方式可简写:

父组件里改成 `:num.sync` ,去掉@erzi,完毕!

子组件改成props:['num']照旧,$emit事件默认会有`update:num`,所以子组件emit  erzi那段改为this.$emit('update:num','父子组件同步的数据值')

有死宅程序员可以加个Q群,交流or摸鱼聊天:522976012

Logo

前往低代码交流专区

更多推荐