vue如何在子组件内使用v-model绑定父组件的值？

Question

父组件<base-data-select     :select-value.sync="selectGameCategory"     :base-data-list="gameCategoryList"     @change="queryGameApi"></base-data-select>子组件<template>  <el-select v-model="selectValue" @change="queryGameApi">    <el-option      v-for="item in baseDataList"      :key="item.value"      :label="lang=='zh' ? item.nameCn : item.nameEn"      :value="item.value">    </el-option>  </el-select></template><script>  export default {    name: 'options',    props: ['selectValue', 'baseDataList'],    methods: {      queryGameApi() {        this.$emit('update:selectValue', this.selectValue)        this.$emit('change')      }    },    computed: {      lang() {        return this.$store.getters.lang      }    }  }</script>这样写，程序执行正常但是，控制台会报错： vue.esm.js?efeb:574 [Vue warn]: Avoid mutating a prop directly  since the value will be overwritten whenever the parent  component re-renders. Instead, use a data or computed  property based on the prop's value. Prop being mutated:  "selectValue"  应该怎么写才能正常啊我刚刚又改了一下子组件，一切正常了，但是我不知道这种写法是不是最优雅的<template>  <el-select :value="selectValue" v-model="value"   @change="queryGameApi">    <el-option      v-for="item in baseDataList"      :key="item.value"      :label="lang=='zh' ? item.nameCn : item.nameEn"      :value="item.value">    </el-option>  </el-select></template><script>  export default {    name: 'options',    props: ['selectValue', 'baseDataList'],    data() {      return {        value: this.selectValue      }    },    methods: {      queryGameApi() {        this.$emit('update:selectValue', this.value)        this.$emit('change')      }    },    computed: {      lang() {        return this.$store.getters.lang      }    }  }</script>

Answer 1

<template>

  <el-select v-model="selectValueOrg" @change="queryGameApi">

    <el-option

      v-for="item in baseDataList"

      :key="item.value"

      :label="lang=='zh' ? item.nameCn : item.nameEn"

      :value="item.value">

    </el-option>

  </el-select>

</template>

<script>

  export default {

    name: 'options',

    data(){

        return {selectValueOrg:this.selectValue}

    },

    props: ['selectValue', 'baseDataList'],

    methods: {

      queryGameApi() {

        this.$emit('update:selectValue', this.selectValueOrg)

        this.$emit('change')

      }

    },

    computed: {

      lang() {

        return this.$store.getters.lang

      }

    }

  }

</script>

这么写应该就不会报错了

Answer 2

子组件的 props 已经说明 selectValue 是一个 prop，但是实际上父组件并没有给子组件传这个值