2
私は、カスタムコンポーネントでv-model双方向バインディングを1レベル深く実行することができましたが、それを一層深くする必要があります。Vue.js v-modelコンポーネント
現在の作業コード：このように使用
<template lang="html">
<div class="email-edit">
<input ref="email" :value="value.email" @input="updateInput()"/>
<input ref="body" :value="value.body" @input="updateInput()"/>
</div>
</template>
<script type="text/javascript">
import LineEditor from './LineEditor.vue'
export default {
components: {
LineEditor
},
computed: {
},
methods: {
updateInput: function(){
this.$emit('input',{
email: this.$refs.email.value,
body: this.$refs.body.value
})
}
},
data: function(){
return {}
},
props: {
value: {
default: {
email: "",
body: ""
},
type:Object
}
}
}
</script>
：<email-edit-input v-model="emailModel" />
私はこの作品を追加する場合は、値はもはや上向きに伝播しません：
<div class="email-edit">
<line-editor ref="email" :title="'Email'" :value="value.email" @input="updateInput()"/>
<input ref="body" :value="value.body" @input="updateInput()"/>
</div>
</template>
<script type="text/javascript">
import LineEditor from './LineEditor.vue'
export default {
components: {
LineEditor
},
computed: {
},
methods: {
updateInput: function(){
this.$emit('input',{
email: this.$refs.email.value,
body: this.$refs.body.value
})
}
},
data: function(){
return {}
},
props: {
value: {
default: {
email: "",
body: ""
},
type:Object
}
}
}
</script>
この第2カスタムコンポーネントの使用：
<template lang="html">
<div class="line-edit">
<div class="line-edit__title">{{title}}</div>
<input class="line-edit__input" ref="textInput" type="text" :value="value" @input="updateInput()" />
</div>
</template>
<script type="text/javascript">
export default {
components: {
},
computed: {
},
methods: {
updateInput: function(){
this.$emit('input', this.$refs.textInput.value)
}
},
data: function(){
return {}
},
props: {
title:{
default:"",
type:String
},
value: {
default: "",
type: String
}
}
}
</script>
最初のコードブロックは、入力だけで正常に動作します。しかし、2つのカスタムコンポーネントを使用しても、両方のコンポーネントに泡立つように見えることはなく、LineEditorのみです。入れ子に関係なく、これらの値をすべてのカスタムコンポーネントにバブルアップさせるにはどうすればよいですか？
これらはもっと完全な解決策であるようです。私は自分のコードベースに追加しました。私があなたのロジックに従っていることを確認するだけです。小道具は子供に渡され、子供はウォッチャーを使用して親から小道具への変更をキャッチし、それに従ってインスタンススコープ変数を調整します。インスタンススコープ変数dataは、ユーザーが編集した内容を維持するためにv-modelとして入力に使用され、入力時にemitを介して親に渡されます。これはあなたのロジックチェーンをカバーしていますか？ – steventnorris
@steventnorrisあなたはそれを持っています。 – Bert