이 기사의 내용은 Vue 구성 요소 내부에 양방향 데이터 바인딩을 구현하는 코드 예제에 대한 것입니다. 필요한 친구가 참고할 수 있기를 바랍니다.
아이디어: 상위 구성 요소는 props를 통해 하위 구성 요소에 값을 전달하고, 하위 구성 요소는 $emit를 사용하여 해당 props 값을 수정하도록 상위 구성 요소에 알립니다.
import Vue from 'vue'
const component = {
props: ['value'],
template: `
<div>
<input type="text" @input="handleInput" :value="value">
</div>
`,
data () {
return{}
},
methods: {
handleInput (e) {
this.$emit('input', e.target.value)
}
}
}
new Vue({
components: {
CompOne: component
},
el: '#root',
template: `
<div>
<comp-one :value1="value" @input="value = arguments[0]"></comp-one>
</div>
`,
data () {
return{
value: '123'
}
}
})
[관련 권장 사항] : JavaScript 비디오 튜토리얼]
위 내용은 Vue 구성 요소 내부에 양방향 데이터 바인딩을 구현하기 위한 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!