일방통행입니다. Vue에는 양방향 바인딩 "v-model"이 있지만 Vue 상위 구성 요소와 하위 구성 요소 간의 데이터 전송은 여전히 단방향 데이터 흐름을 따릅니다. 상위 구성 요소는 하위 구성 요소에 소품을 전달할 수 있지만 하위 구성 요소는 수정할 수 없습니다. 상위 구성요소가 전달한 props, 하위 구성요소는 이벤트를 통해 상위 구성요소에만 데이터 변경을 알릴 수 있습니다.
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.
vue는 단방향 데이터 흐름입니다. 데이터 흐름 방향은 위에서 아래로, 상위 구성 요소에서 하위 구성 요소로 진행됩니다.
Vue의 양방향 데이터 바인딩과 혼동하지 마세요. 양방향 데이터 바인딩은 데이터 흐름이 아닌 뷰와 템플릿 간의 렌더링 관계를 나타냅니다.
Vue 상위 구성 요소와 하위 구성 요소 간의 데이터 전송은 다음과 같습니다. 단일 데이터 흐름의 경우 상위 구성 요소는 하위 구성 요소에 소품을 전달할 수 있지만 하위 구성 요소는 상위 구성 요소가 전달한 소품을 수정할 수 없습니다. 하위 구성 요소는 이벤트를 통해 상위 구성 요소에만 데이터 변경을 알릴 수 있습니다.
1. 단방향 데이터 흐름:
모든 prop은 부모와 자식 prop 사이에 단방향 하향 바인딩을 형성합니다. 부모 prop의 업데이트는 자식 구성 요소로 아래로 흐르지만 그 반대의 경우도 마찬가지입니다. 이렇게 하면 하위 구성 요소가 실수로 상위 구성 요소의 상태를 변경하여 애플리케이션의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지할 수 있습니다.
또한 상위 구성 요소가 변경될 때마다 하위 구성 요소의 모든 props가 최신 값으로 새로 고쳐집니다. 즉, 하위 구성 요소 내부의 소품을 변경하면 안 됩니다. 이렇게 하면 상위 구성 요소의 상태도 변경됩니다.
2, Prop은 참조로 전달됩니다.
객체와 배열은 JavaScript에서 참조로 전달되므로 배열 또는 객체 유형 prop의 경우 하위 구성 요소에서 객체를 변경하거나 배열 자체가 상위 구성 요소의 상태입니다.
v-model은 사용 시 양방향 바인딩과 매우 유사합니다. , 그러나 Vue는 단일 데이터 흐름이고 v-model은 단지 구문 설탕입니다.
<input v-model="something" /> <input v-bind:value="something" v-on:input="something = $event.target.value" />
코드의 첫 번째 줄은 실제로 두 번째 줄의 구문 설탕입니다. 그런 다음 두 번째 코드 줄은 다음과 같이 축약될 수 있습니다.
<input :value="something" @input="something = $event.target.value" />
이 코드 줄을 이해하려면 먼저 입력 요소 자체에 oninput 이벤트가 있다는 것을 알아야 합니다. 이는 onchange와 유사하게 HTML5에 새로 추가된 것입니다. 입력 상자의 내용이 변경되면 Oninput이 트리거되고 $event를 통해 최신 값이 전달됩니다.
Syntax Sugar와 원래 구문의 두 줄의 코드를 주의 깊게 관찰하면 결론을 내릴 수 있습니다. v-model 속성을 입력 요소에 추가하면 해당 값이 기본적으로 요소의 속성으로 사용됩니다. , 'input' 이벤트는 실시간 Pass 값 트리거 이벤트로 사용됩니다
v-model은 입력뿐만 아니라 컴포넌트에도 사용할 수 있습니다. .공식 홈페이지에서 데모를 살펴보세요.
<currency-input v-model="price"></currency-input>
Vue.component('currency-input', {
template: '\
<span>\
$\
<input\
ref="input"\
v-bind:value="value"\
v-on:input="updateValue($event.target.value)"\
>\
</span>\
',
props: ['value'], // 为什么这里要用 value 属性，value在哪里定义的？
methods: {
// 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
updateValue: function (value) {
var formattedValue = value
// 删除两侧的空格符
.trim()
// 保留 2 位小数
.slice(
0,
value.indexOf('.') === -1
? value.length
: value.indexOf('.') + 3
)
// 如果值尚不合规，则手动覆盖为合规的值
if (formattedValue !== value) {
this.$refs.input.value = formattedValue
}
// 通过 input 事件带出数值
// <!--为什么这里把 'input' 作为触发事件的事件名？`input` 在哪定义的？-->
this.$emit('input', Number(formattedValue))
}
}
})이 두 질문에 대한 답을 알고 계시다면, v-model을 완전히 마스터하신 것을 축하드립니다. 이해가 되지 않는다면 다음 코드를 살펴보세요:
<currency-input v-model="price"></currency-input> 所以在组件中使用时，它相当于下面的简写： //上行代码是下行的语法糖 <currency-input :value="price" @input="price = arguments[0]"></currency-input>
그러므로 v-model 속성을 추가할 때 기본적으로 value는 컴포넌트의 속성으로 사용되며, 'input' 값은 이벤트를 컴포넌트에 바인딩할 때 이벤트 이름으로 사용됩니다. 이는 구성 요소를 작성할 때 특히 유용합니다.
체크박스나 라디오 버튼과 같은 일반적인 컴포넌트를 만들 때 v-model은 사용하기 쉽지 않습니다.
<input type="checkbox" v-model="something" />
v-model은 value 속성과 oninput 이벤트를 제공합니다. 그러나 우리에게 필요한 것은 value 속성이 아니라 selected 속성입니다. 그리고 이 라디오 버튼을 클릭하면 oninput 이벤트가 트리거되지 않습니다. onchange 이벤트만 트리거합니다.
v-model은 입력 요소에만 사용되므로 이 상황은 쉽게 해결할 수 있습니다.
<input type="checkbox" :checked="value" @change="change(value, $event)"
v-model을 구성 요소에 사용하는 경우:
<checkbox v-model="value"></checkbox>
Vue.component('checkbox', {
tempalte: '<input type="checkbox" @change="change" :checked="currentValue"/>'
props: ['value'],
data: function () {
return {
//这里为什么要定义一个局部变量，并用 prop 的值初始化它。
currentValue: this.value
};
},
methods: {
change: function ($event) {
this.currentValue = $event.target.checked;
this.$emit('input', this.currentValue);
}
})Vue 2.2 버전에서는 구성 요소 모델 옵션 정의 시 통과할 수 있습니다. 소품/이벤트를 맞춤 설정합니다.
위의 v-model 분석을 통해 양방향 데이터 바인딩은 단방향 바인딩을 기반으로 입력 요소(입력, 텍스트 등)에 변경 사항을 추가한다는 것을 이해할 수 있습니다. (입력) 이벤트는 모델과 뷰를 동적으로 수정합니다. 즉, 상위 구성 요소의 이벤트를 트리거($emit)하여 mvvm의 효과를 달성하기 위해 mv를 수정합니다. Vue 구성 요소 간의 데이터 전송은 단방향입니다. 즉, 데이터는 항상 상위 구성 요소에서 하위 구성 요소로 전달됩니다. 하위 구성 요소는 자체 데이터를 내부적으로 유지할 수 있지만 데이터를 수정할 권한은 없습니다. 개발 시 사용자가 이를 시도하면 vue에서 오류를 보고합니다. 이는 구성 요소 간의 더 나은 분리를 위해 수행됩니다. 하위 구성 요소가 상위 구성 요소의 데이터를 수정할 수 있는 경우 하위 구성 요소가 변경됩니다. 이 데이터에 의존하는 모든 데이터를 트리거하므로 하위 구성 요소가 변경됩니다. Vue는 하위 구성요소가 상위 구성요소의 데이터를 수정하는 것을 권장하지 않습니다. props를 직접 수정하면 경고가 발생합니다. 흐름도는 다음과 같습니다.
그래서 자식 컴포넌트에서 props를 수정하고 싶을 때 자식 컴포넌트를 부모 컴포넌트로 사용하면
【관련 추천: vuejs 비디오 튜토리얼, 웹 프론트엔드 개발】
위 내용은 Vue 데이터 흐름은 단방향인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
