vue子組件修改父組件v-modal傳遞回來的值
場景
解決
父組件
子組件
場景
有時候需要將一些組件參數配置化,那些就需要抽離,那些vue 是單向數據流,子組件是不允許直接修改父組件的值,除去一些自定義配置化屬性的修改,可以采用默認配置,解決代碼
解決
會有一種默認的隱藏傳遞:那就是如果父組件傳遞的是帶有v-modal值的,那么vue是自帶了一個隱藏的屬性 this.$emit(‘input’,val)
父組件
<template> <div> 父組件 {{data}} <child v-model="year" /> <div/> </template> <script> import child from "./childrenS.vue"; export default{ data(){ return { year:‘’ } }, components: { child }, } </script>
子組件
<template> <DatePicker type="year" v-model="model" @on-change="doSelect" style="width:100%" :placeholder="$t('inputTips.pleaseFillIn')" ></DatePicker> </template> <script> export default { data () { return { model: this.value } }, watch: { 'value': function () { this.model = this.value } }, props: { year: { type: String, default: '' }, value: { type: [String, Number, Array], default: '' } }, methods: { doSelect (item) { this.$emit('input', item) } } } </script> <style lang="less" scoped> </style>