Vue2는 컴포넌트 소품의 양방향 바인딩을 구현합니다.

Vue Study Notes-3 서문

Vue 1.x, Vue 2.x에 비해 Virtual-Dom 구현 외에 사용자가 느끼는 가장 큰 불편함은 컴포넌트의 props 제거입니다. 바인딩 기능.
과거에는 Vue1에서 props의 양방향 바인딩 기능을 구현하기 위해 props의 twoWay 및 .sync 바인딩 수정자를 사용했습니다.

Vue2의 컴포넌트 props 통신 방식

Vue2에서는 컴포넌트 props의 데이터 흐름이 한 방향으로만 흐르도록 변경되었습니다. 즉, 컴포넌트 외부에서만 흐를 수 있습니다(컴포넌트 호출). 측) 컴포넌트의 DOM을 통해 속성은 컴포넌트에 props를 전달합니다. 컴포넌트는 컴포넌트 외부에서 전달된 데이터만 수동적으로 받을 수 있으며, 컴포넌트 내에서는 외부 레이어에서 전달된 props 데이터를 수정할 수 없습니다.

이 변경에 대한 공식 설명:

prop는 단방향 바인딩입니다. 상위 구성 요소의 속성이 변경되면 하위 구성 요소로 전송됩니다. , 하지만 그 반대는 아닙니다. 이는 하위 구성 요소가 상위 구성 요소의 상태를 실수로 수정하여 애플리케이션의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지하기 위한 것입니다.

props의 양방향 바인딩을 포기하는 것이 전체 프로젝트에 유익하고 정확하더라도, 어떤 시점에서는 구성 요소 내에서 props를 수정해야 합니다

Case

iOS 스타일의 전환 버튼을 만들고 싶다고 가정해 보겠습니다. 요구 사항은 두 가지뿐입니다.

버튼을 클릭하여 켜기/끄기 상태를 전환하세요.

설정 없이 외부에서 수정할 수도 있습니다. 버튼을 클릭하면 캐스케이드 연결 스위치와 같은 데이터 전환 스위치 상태가 됩니다.

코드는 대략 다음과 같습니다.

<div id="app">
 <!--开关组件-->
 <switchbtn :result="result"></switchbtn>
 <!--外部控制-->
 <input type="button" value="change" @click="change">
</div>

rrree

그러나 vue2.0에서는 위 코드를 클릭하면 오류가 보고됩니다. :

[Vue 경고]: 상위 구성 요소가 다시 렌더링될 때마다 값을 덮어쓰므로 Prop을 직접 변경하지 마세요. 대신 Prop의 값을 기반으로 데이터 또는 계산된 속성을 사용하세요. mutated: " result" (컴포넌트에 있음)

props의 값은 컴포넌트 내에서 수정될 수 없으며 수정된 값은 컴포넌트의 외부 레이어와 동기화되지 않습니다. 즉, 호출하는 컴포넌트는 동기화되지 않습니다. 컴포넌트 내부의 현재 상태를 모릅니다

Vue2.0에서 컴포넌트 속성의 양방향 바인딩 방법을 구현합니다

1. 구성 요소

결과를 쓸 수 없기 때문에 데이터에 myResult 변수의 복사본을 생성해야 하며 초기 값은 props 속성 결과의 값이고 props가 필요할 때마다 이 데이터 객체 myResult를 호출해야 합니다. 구성 요소에서 호출됩니다.

//开关组件代码
Vue.component("switchbtn",{
 template:"<div @click=&#39;change&#39;>{{result?&#39;开&#39;:&#39;关&#39;}}</div>",
 props:["result"],
 methods:{
 change(){
  this.result=!this.result;
 }
 }
});
 
//调用组件
new Vue({
 el: "#app",
 data:{
 result:true//开关状态数据
 },
 methods:{
 change(){
  this.result=!this.result;
 }
 }
});

2. 컴포넌트 외부의 props 수정을 동기화하기 위해 props 속성에 대한 watch를 생성합니다

이때 컴포넌트의 props는 외부에서 수정됩니다. 컴포넌트(상위 컴포넌트)에 해당하는 props와 동기화가 되지만 데이터 객체에 방금 생성한 복사본과는 동기화가 되지 않으므로 props 속성 결과에 대한 watch(모니터)를 생성해야 합니다. . props가 수정되면 데이터의 복사본에 해당합니다. 복사본 myResult도 데이터를 동기화해야 합니다.

Vue.component("switchbtn", {
 template: "<div @click=&#39;change&#39;>{{myResult?&#39;开&#39;:&#39;关&#39;}}</div>",
 props: ["result"],
 data: function () {
 return {
  myResult: this.result//data中新增字段
 };
 },
 ......
});

3. props 복사본에 대한 watch를 생성하고 컴포넌트 외부에 알림

이때 props 복사본은 myResult입니다. 컴포넌트 내부의 props 상태는 컴포넌트 외부에서는 알 수 없으므로 data 속성에 해당하는 watch인 myResult라는 props의 복사본을 생성해야 합니다.
구성 요소 내의 알림을 외부 레이어(상위 구성 요소)에 보내 구성 요소 내의 속성 변경을 알리면 외부 레이어(상위 구성 요소)가 데이터 자체를 변경합니다.

최종 코드:

Vue.component("switchbtn", {
 template: "<div @click=&#39;change&#39;>{{myResult?&#39;开&#39;:&#39;关&#39;}}</div>",
 props: ["result"],
 data: function () {
 return {
  myResult: this.result
 };
 },
 watch: {
 result(val) {
  this.myResult = val;//新增result的watch，监听变更并同步到myResult上
 }
 },
 ......

<div id="app">
 <switchbtn :result="result" @on-result-change="onResultChange"></switchbtn>
 <input type="button" value="change" @click="change">
</div>

이때 컴포넌트 내부 데이터와 컴포넌트 외부 데이터의 양방향 바인딩이 이루어지며, 컴포넌트 내부와 외부의 데이터 동기화가 이루어집니다. 달성. 결국 한 문장으로 귀결됩니다. 컴포넌트가 내부적으로 변경되면 외부 세계에 알리고, 변경할지 여부는 외부 세계에서 결정합니다.

4. 양방향 제본에 적합한 소품은 무엇인가요?

먼저 선언해야 할 것은 양방향 바인딩 소품은 특히 복잡한 비즈니스에서 구성 요소 간 데이터 상태 관리에 도움이 되지 않으므로 양방향 바인딩을 최대한 적게 사용하고 복잡한 데이터의 경우 너무 많이 사용한다는 것입니다. 처리하려면 Vuex(http://vuex.vuejs.org/zh-cn/intro.html)를 사용하는 것이 좋습니다

그러나 일상적인 사용에는 양방향 바인딩이 실제로 필요합니다. 개인적으로 양방향 바인딩 소품은 다음과 같은 조건이 충족될 때만 사용해야 한다고 생각합니다.

컴포넌트 내부에서 Prop을 수정해야 합니다.

구성 요소는 단순히 초기화하기보다는 런타임 시 외부에서 동적으로 제어해야 합니다.

처리를 위해 구성 요소의 외부 상태를 읽어야 합니다.

위 조건을 충족하는 것에는 스위치 상태의 외부 제어가 필요한 이 예의 스위치 구성 요소가 포함됩니다. 또 다른 예는 Tab입니다. 다중 탭 구성 요소의 activeIndex 속성은 탭이 현재 열려 있는 페이지 등을 외부적으로 제어할 수 있어야 합니다.

props의 자동화된 양방향 바인딩 처리

Vue의 믹스인 구성요소 - propsync

通过上例也可以看出在Vue2.0中实现props的双向绑定很麻烦，如果有两个props需要做双向绑定上面的代码就要实现两遍，代码极其冗余。
所以我写了一个mixin来自动化处理props的双向绑定的需求——propsync。

主要功能

实现了在组件内自动创建所有prop对应的data属性，方便组件内修改prop使用。解决了vue2.0中不允许组件内直接修改prop的设计。

实现了组件外修改组件prop，组件内自动同步修改到data属性。

实现了组件内修改了data属性（由prop创建的），自动向组件外发出事件通知有内部prop修改。由组件外决定是否要将修改同步到组件外

propsync的使用方法

编写组件

对于编写组件时，如果需要props双向绑定，则直接引入mixin，并在配置中声明mixin即可： mixins: [propsync]

此mixin会根据prop的名称生成对应的data属性名，默认为在prop属性名前面增加"p_"，即若prop中有字段名为active，则自动生成名为p_active的data字段（props到data的名称变更方法可自行修改，详见propsync源码开头配置）

propsync默认会将所有props创建双向绑定，可通过propsync:false来声明此props不需要创建双向绑定。

例：

import propsync from './mixins/propsync';//引入mixin文件
export default {
 name: "tab",
 mixins: [propsync],//声明使用propsync的mixin
 props: {
 active: {
 type: [String, Number],//会被propsync自动实现双向绑定，在data中创建p_active变量
 },
 width: {
 type: [Number, String],
 propsync:false//不会被propsync实现双向绑定
 }
 },
 methods: {
 setActive(page, index, e) {
 this.p_active = index;//可以直接使用this.p_active
 }
 }
}

调用组件

引入propsync后，会在内部双向绑定的data变更后触发一个onPropsChange事件。遂在调用组件处，增加一个事件监听 onPropsChange（可修改），当组件内修改了props时propsync会触发此事件，返回参与依次为：修改prop名称，修改后值，修改前值。可以由当前组件调用方（父组件）来决定是否要将组件内的变更同步到调用方
例：

<tab :active="active" @onPropsChange="change"></tab>
  
......略
{
 data:{
 active:0
 },
 methods:{
 change:function(propName,newVal,oldVal){
 this[propName]=newVal;
 console.log("组件tab的" +propName+ "属性变更为" +newVal);
 }
 }
}

更多Vue2는 컴포넌트 소품의 양방향 바인딩을 구현합니다.相关文章请关注PHP中文网！