vue子组件修改父组件v-modal传递回来的值
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>