vue input 使用v-model想要改變父屬性的寫法

直接在子組件使用v-model=“props傳遞的父屬性”是會爆出警告的，也不符合vue 的設計思想，所以可以如下寫法：

父組件：

<template>
  <div>
    <Test1 :curVal="val" @change-val="setVal"/>
  </div>
</template>

<script>
import Test1 from "@/components/Test1.vue";
export default {
  name: "Home",
  data() {
    return {
      val:''
    };
  },
  components: {
    Test1
  },
  methods:{
    setVal(val){
      this.val=val;
    }
  }
};
</script>

<style lang="less" scoped>
</style>

子組件：

<template>
  <div>
    <el-button type="success">成功按鈕</el-button>
    <br>
    <el-input v-model="val" @input="changeVal" placeholder="請輸入內容"></el-input>
  </div>
</template>

<script>
export default {
  name:'Test1',
  props:['curVal'],
  data(){
    return {
      val:''
    }
  },
  methods:{
    changeVal(val){
      this.$emit('change-val',this.val)
    }
  }
};
</script>

<style lang="less" scoped>
</style>

這里用到了elementui 想要運行代碼的同學可以下載一下編譯后使用