龙空技术网

Vue开发:子组件修改传递的父组件属性值

书香学编程 183

前言:

而今小伙伴们对“sync修饰符”大约比较重视,你们都想要学习一些“sync修饰符”的相关文章。那么小编也在网上搜集了一些对于“sync修饰符””的相关知识,希望各位老铁们能喜欢,我们一起来了解一下吧!

场景:

父组件给子组件传递属性值, 在子组件内部会对传递的属性值进行修改,子组件修改之后,把修改后的值传递给父组件

//子组件<template>  <div class="children">    <el-button @click="add">加1</el-button>  </div></template><script>  export default {    props: {      inputValue: {        required: true,        type: Number,      },    },    data() {      return{        value:0      }    },    created() {      this.initValue();    },    methods: {      initValue(){        this.value = this.inputValue      },      add() {        this.value ++;        this.$emit("update:inputValue", this.value);      }    },  }</script>
//父组件<template>  <div class="parent">    <children :inputValue.sync="currentValue"></children>  </div></template><script>  export default {    data() {      return{        currentValue:0      }    },  }</script>

关键点:

子组件通过this.$emit("update:inputValue", this.value);进行属性传值修改父组件引用子组件时使用.sync修饰符修饰属性

标签: #sync修饰符 #vue子组件怎么修改父组件的值 #vue改变子组件的值 #vue子组件修改父组件属性