vue 子元件修改props中的值
阿新 • • 發佈:2018-12-11
問題:子元件想修改父元件傳來的值(props中的值)。普通的修改會報錯,因為這個值是單向的,只能傳進來,要是想修改就要用v-model
解決辦法:用v-model
寫個簡單粗暴例子:
父元件
<control :lingthData="lingthData" v-model="deviceF"></control> //v-model裡面寫上我們要傳給子元件,並且還會在子元件中改變這個值 import control from '@/page/map/control' export default { components: { control }, data () { return { deviceF: true } }
子元件
<template> <div> {{device}} <div @click="look">改變值</div> </div> </template> <script> export default { data () { return { device: this.value, //定義一下 } }, props: ['lingthData', 'value'],//因為想要改變device,所以device要寫成value,這裡是寫死的 components: { }, methods: { look () { this.device = !this.device this.$emit('input', this.device) //這樣this.device就會被修改;前面的input是固定寫死的 } } } </script>
具體為什麼這麼寫,vue文件裡有交待=》
如果我寫的沒看懂,沒關係,這裡還有個線上例子=》