vue子元件修改父元件v-modal傳遞回來的值
阿新 • • 發佈:2022-04-13
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>