0

现在就是想开发一个小插件来练练手,比如说要弄一个城市三级联动选择插件(cityPicker)。
要如何去编写 props 和 data 才能让该插件像那些插件库一样使用 v-model 绑定选择好的数据:

<city-picker v-model="city"></city-picker>

因为我发现,如果直接组件中修改 v-model 绑定的数据的话,vue2.0 会报错:

[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.

想请教一下大神们,如何才能实现组件中能直接给 v-model 绑定的变量赋值?如果要写成:

<city-picker v-model="city" @on-change="cityChange"></city-picker>

这种形式的话,就对用户不太友好了。

5个回答

0

已采纳

2.x版本中组件向子组件传递是单向的,已经禁止在子组件内修改这个值。
那么怎么做呢?用事件来通知父组件进行修改$emit
看各组件库的源代码时,应该注意到这两块代码

props: {
  value: {
    type: Number,
    default: 0
  },
}
this.$emit('input', val)

props里的value就是对应的v-model,而下面的$emit('input',val),就是对应的通知事件,简单的说,value就是v-modelinput事件就是组件向上级通知修改的专用事件。
其实官方文档里有说明的

0

额,自问自答。
看了挺多插件之后,也看过一些教程,如果只是简易的单一插件,可以插件中用下面的方法来实现:

export default {
    name: 'cityPicker',
    props: {
        city: {
            type: String,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            selectedCity: []
        }
    },
    watch: {
        selectedCity(val) {
            this.$emit('input', val)
        }
    }
}

这样就基本上可以了。

0

Vue2.x的数据是单向的,父组件可以传数据给子组件,子组件通过props获取数据后不可以直接修改此数据,必须通过data或者computed声明一个变量并将props的值赋值给此变量,在子组件中可以任意修改此变量。如果此时需要将父组件的值也修改,需要通过$emit事件来修改。

0

参考我之前写的这篇,包含Vue1和Vue2的自定义指令写法:
Vue.js自定义指令开发笔记

撰写答案