v-model을 사용하지 않고 Vue에서 양방향 바인딩을 구현하는 방법에 대해 이야기해 볼까요?

v-model을 사용하지 않고 Vue에서 양방향 바인딩을 구현하는 방법은 무엇입니까? 다음 글에서는 v-model을 사용하지 않고 양방향 바인딩을 구현하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

v-model을 사용하지 않고 양방향 바인딩을 달성하는 방법은 무엇입니까?

어떤 사람들은 이렇게 초보적인 질문을 할 용기가 있다고 말하나요?

말하지 마세요, 제가 Vue를 처음 배웠을 때 저는 이 문제들로 인해 괴로워했고 공식 웹사이트 문서 데모에 따라 글을 써야 했습니다. 일상적인 개발에서 v-model과 관련된 버그. 나중에 신중하게 연구하기로 마음먹은 후에, 아직 할 수 있는 방법이 많다는 것을 알게 되었습니다. [관련 추천사항: vue.js 영상 튜토리얼]

답을 먼저 살펴보겠습니다:

<template>
  <div class="test-v-model">
    <p>使用v-model</p>
    <input v-model="msg" placeholder="edit me" />
    <p>{{ msg }}</p>

    <p>不使用v-model</p>
    <input :value="msg1" @input="handleInput" placeholder="edit me" />
    <p>{{ msg1 }}</p>
  </div>
</template>

<script>
export default {
  name: &#39;test-v-model&#39;,
  data() {
    return {
      msg: &#39;&#39;,
      msg1: &#39;&#39;
    }
  },
  methods: {
    handleInput(e) {
      this.msg1 = e.target.value
    }
  }
}
</script>

v-model을 사용하지 않는 경우 value 속성을 통해 값을 바인딩하고 변경해야 합니다. 양방향 바인딩을 달성하기 위해 입력 이벤트를 통한 바인딩 값.

즉, v-model은 단지 약식 형식일 뿐입니다

사실 v-model의 핵심은 사용자 입력 이벤트를 수신하여 데이터를 업데이트하고 일부 특수 처리를 수행하는 역할을 담당합니다. 극단적인 시나리오. -- 공식 문서

v-model은 내부적으로 다양한 속성을 사용하고 다양한 입력 요소에 대해 다양한 이벤트를 발생시킵니다.

• text 및 textarea 요소는 value 속성과 input을 사용합니다. 이벤트;
value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。

与本题相关联的知识延伸

• 双向绑定
• 单向数据绑定
• vue 组件之间交互的单向数据流

问：什么是双向绑定？

双向绑定就是当数据变化之后，视图同步更新，当视图变化之后，数据也会更新。

问：什么是单向数据绑定?

单向数据绑定就是当数据变化之后，视图同步更新，当视图变化之后，数据不会更新。

在vue中是通过指令 v-model 来实现双向绑定，通过 v-bind체크박스와 라디오는 checked 속성을 ​​사용하고 change 이벤트는

select 필드가 value</li> code>가 됩니다. 소품으로, <code>change를 이벤트로 사용하세요.

이 질문과 관련된 지식 확장

양방향 바인딩

단방향 데이터 바인딩

vue 구성 요소 간 상호 작용을 위한 단방향 데이터 흐름

Q: 양방향 바인딩이란 무엇입니까?

양방향 바인딩은 데이터가 변경되면 뷰가 동기적으로 업데이트되고, 뷰가 변경되면 데이터도 업데이트된다는 의미입니다.

Q: 단방향 데이터 바인딩이란 무엇입니까?

단방향 데이터 바인딩은 데이터가 변경될 때 뷰가 동기적으로 업데이트되지 않음을 의미합니다.

vue에서는 v-model은 양방향 바인딩을 구현하고 v-bind는 단방향 바인딩을 구현합니다. 데이터 바인딩

다음 코드와 이 코드 실행에 대한 gif 데모를 읽고 나면 차이점을 이해할 수 있을 것입니다.

<template>
  <div>
    <p>双向绑定</p>
    <input v-model="msg" placeholder="edit me" />
    <p>{{ msg }}</p>

    <p>单向数据绑定</p>
    <input v-bind:value="msg1" placeholder="edit me" />
    <p>{{ msg1 }}</p>
  </div>
</template>

<script>
export default {
  name: &#39;test-v-model&#39;,
  data() {
    return {
      msg: &#39;&#39;,
      msg1: &#39;&#39;
    }
  }
}
</script>

gif에서 볼 수 있듯이 v-model을 사용하면 데이터가 변경되면 뷰가 동기적으로 업데이트됩니다. 이는 양방향 바인딩입니다.

v-bind를 사용하면 데이터가 변경될 때 뷰가 동기적으로 업데이트됩니다. 이는 단방향 데이터 바인딩입니다.

Q: Vue 단방향 데이터 흐름이란 무엇인가요?

하위 구성 요소는 상위 구성 요소가 전달한 prop 속성을 변경할 수 없습니다. 권장되는 접근 방식은 이벤트를 발생시키고 상위 구성 요소에 바인딩된 값을 자체적으로 변경하도록 알리는 것입니다.

결론적으로 데이터는 줄어들고 이벤트는 늘어납니다.

Vue 문서는 제안을 도입할 때 단방향 데이터 흐름의 개념을 제시합니다. 🎜여기를 클릭하세요🎜 Vue 문서의 단방향 데이터 흐름에 대한 설명을 보려면. 🎜🎜🎜모든 prop은 부모와 자식 prop 사이에 🎜단방향 하향 바인딩🎜을 형성합니다. 부모 prop에 대한 업데이트는 자식 구성 요소로 아래쪽으로 흐르지만 그 반대는 아닙니다. 이렇게 하면 하위 구성 요소가 실수로 상위 구성 요소의 상태를 변경하여 애플리케이션의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지할 수 있습니다. 🎜🎜🎜🎜또한 상위 구성 요소가 변경될 때마다 하위 구성 요소의 모든 props가 최신 값으로 새로 고쳐집니다. 즉, 하위 구성 요소 내부의 소품을 변경하면 🎜안 됩니다 🎜. 이렇게 하면 Vue는 브라우저 콘솔에 경고를 표시합니다. 🎜🎜🎜다음 예를 살펴보겠습니다. 🎜🎜하위 구성 요소가 prop 값에 대해 직접 양방향 바인딩을 수행하면 어떻게 되나요? 🎜🎜상위 구성 요소 코드: 🎜

<template>
  <child-component :value="fatherValue" />
</template>

<script>
import ChildComponent from &#39;./child.vue&#39;

export default {
  name: &#39;father-component&#39;,
  components: {
    ChildComponent
  },
  data() {
    return {
      fatherValue: &#39;&#39;
    }
  }
}
</script>

🎜하위 구성 요소 코드: 🎜

<template>
  <div class="child-component">
    <input v-model="value" placeholder="edit me" />
    <p>{{ value }}</p>
  </div>
</template>

<script>
export default {
  name: &#39;child-component&#39;,
  props: {
    value: {
      type: String,
      default: &#39;&#39;
    }
  }
}
</script>

🎜🎜🎜🎜🎜🎜

可以看到，childComponent中的 prop 值可以实现双向绑定，但是 FatherComponent 中的 data 值并未发生改变，而且控制台抛出了警告：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

翻译一下：避免直接改变 prop 值，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于 prop 值的 data 或 computed。

很显然，直接改变子组件的 prop 值的这种行为被 vue 禁止了。

如何操作传入子组件的 prop 值

但是很多时候，我们确实要操作传入子组件的 prop 值，该怎么办呢？

正如上面的警告所说，有两种办法：

• 这个 prop 用来传递一个初始值，定义一个本地的 data property 并将这个 prop 用作其初始值

props: {
  initialCounter: {
    type: Number,
    default: 0
  },
},
data() {
  return {
    counter: this.initialCounter
  }
}

• 这个 prop 以一种原始的值传入且需要进行转换，用这个 prop 的值来定义一个计算属性

props: {
  size: {
    type: String,
    default: ''
  }
},
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

这样不管怎么操作数据都是操作的子组件数据了，不会影响到父组件数据。

所以，我们想用 prop 传入的数据实现双向绑定，可以这么写：

父组件代码不变

子组件里用 innerValue 来接收传入的 value ：

<template>
  <div class="child-component">
    <input v-model="innerValue" placeholder="edit me" />
    <p>{{ innerValue }}</p>
  </div>
</template>

<script>
export default {
  name: &#39;child-component&#39;,
  props: {
    value: {
      type: String,
      default: &#39;&#39;
    }
  },
  data() {
    return {
      innerValue: this.value
    }
  }
}
</script>

这里要注意一个问题

在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

还是上面的例子，我们将传入的值改为对象：

父组件代码：

<template>
  <child-component :obj="fatherObj" />
</template>

<script>
import ChildComponent from &#39;./child.vue&#39;

export default {
  name: &#39;father-component&#39;,
  components: {
    ChildComponent
  },
  data() {
    return {
      fatherObj: {
        name: &#39;lin&#39;
      }
    }
  }
}
</script>

子组件代码：

<template>
  <div class="child-component">
    <input v-model="innerObj.name" placeholder="edit me" />
    <p>{{ innerObj.name }}</p>
  </div>
</template>

<script>
export default {
  name: &#39;child-component&#39;,
  props: {
    obj: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      innerObj: this.obj
    }
  }
}
</script>

这里的 this.obj 是引用类型，赋值给了 innerObj，所以 innerObj 实际上还是指向了父组件的数据，对 innerObj.name 的修改依然会影响到父组件

所以，处理这种引用类型数据的时候，需要深拷贝一下

import { clone } from 'xe-utils'
export default {
  name: 'child-component',
  props: {
    obj: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      innerObj: clone(this.obj, true)
    }
  }
}

如上图所示，这样子组件和父组件之间的数据就不会互相影响了。

总结

至此，终于把双向绑定和单向数据流讲清楚了，真的没想到，平时开发时都懂的概念，想讲清楚居然花了这么多篇幅，确实不容易，不过，这也是对自己的一种锻炼吧。

问：v-model是双向绑定吗？

是，但只是语法糖

问：v-model是单向数据流吗？

是，数据向下，事件向上

本题还有一些其他问法，比如：

• vue 的双向绑定和单向数据流有什么区别？
• 为什么说 vue 的双向绑定和单向数据流不冲突？

看完本篇文章，相信不管怎么问，你都能对这两个概念理解透彻了。

更多编程相关知识，请访问：编程入门！！

위 내용은 v-model을 사용하지 않고 Vue에서 양방향 바인딩을 구현하는 방법에 대해 이야기해 볼까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!