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>&nbsp; <el-select v-model="selectValueOrg" @change="queryGameApi">&nbsp; &nbsp; <el-option&nbsp; &nbsp; &nbsp; v-for="item in baseDataList"&nbsp; &nbsp; &nbsp; :key="item.value"&nbsp; &nbsp; &nbsp; :label="lang=='zh' ? item.nameCn : item.nameEn"&nbsp; &nbsp; &nbsp; :value="item.value">&nbsp; &nbsp; </el-option>&nbsp; </el-select></template><script>&nbsp; export default {&nbsp; &nbsp; name: 'options',&nbsp; &nbsp; data(){&nbsp; &nbsp; &nbsp; &nbsp; return {selectValueOrg:this.selectValue}&nbsp; &nbsp; },&nbsp; &nbsp; props: ['selectValue', 'baseDataList'],&nbsp; &nbsp; methods: {&nbsp; &nbsp; &nbsp; queryGameApi() {&nbsp; &nbsp; &nbsp; &nbsp; this.$emit('update:selectValue', this.selectValueOrg)&nbsp; &nbsp; &nbsp; &nbsp; this.$emit('change')&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; computed: {&nbsp; &nbsp; &nbsp; lang() {&nbsp; &nbsp; &nbsp; &nbsp; return this.$store.getters.lang&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }</script>这么写应该就不会报错了

Answer 2

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