Vue에서 양방향 바인딩을 구현하는 방법은 무엇입니까?

Vue는 양방향 바인딩을 구현합니다. 1. v-model 명령을 사용하여 바인딩을 구현합니다. 사용자 정의 구성 요소의 v-model은 modelValue prop을 전달하고 throw된 update:modelValue 이벤트를 수신하는 것과 동일합니다. better-sync 플러그인은 바인딩을 구현합니다. 3. v-bind.sync 수정자를 사용합니다. 구문은 ""입니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

Vue에서 양방향 바인딩을 구현하는 여러 가지 방법

1.v-model 지시어

<childcomponent></childcomponent>

<!-- 是以下的简写: -->

<childcomponent></childcomponent>

프로퍼티나 이벤트 이름을 다른 이름으로 변경하려면 model 옵션: <code>model 选项：

<!-- ParentComponent.vue -->

<ChildComponent v-model="pageTitle" />

// ChildComponent.vue

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

所以，在这个例子中 v-model 是以下的简写：

<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

在 Vue 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

Vue3 可以绑定多个v-model, 例如：<childcomponent v-model:title="pageTitle" v-model:name="pageName"></childcomponent>

2、vue-better-sync 插件

有需求如此：开发一个 Prompt 组件，要求同步用户的输入，点击按钮可关闭弹窗。

一般我们会这样做：

<template>
  <div v-show="_visible">
    <div>完善个人信息</div>
    <div>
      <div>尊姓大名？</div>
      <input v-model="_answer" />
    </div>
    <div>
      <button @click="_visible = !_visible">确认</button>
      <button @click="_visible = !_visible">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  name: &#39;prompt&#39;,
  
  props: {
    answer: String,
    visible: Boolean
  },
  
  computed: {
    _answer: {
      get() {
        return this.answer
      },
      set(value) {
        this.$emit(&#39;input&#39;, value)
      }
    },
    _visible: {
      get() {
        return this.visible
      },
      set(value) {
        this.$emit(&#39;update:visible&#39;, value)
      }
    }
  }
}
</script>

写一两个组件还好，组件规模一旦扩大，写双向绑定真能写出毛病来。于是，为了解放生产力，有了 vue-better-sync 这个轮子，且看用它如何改造我们的 Prompt 组件：

<template>
  <div v-show="actualVisible">
    <div>完善个人信息</div>
    <div>
      <div>尊姓大名？</div>
      <input v-model="actualAnswer" />
    </div>
    <div>
      <button @click="syncVisible(!actualVisible)">确认</button>
      <button @click="syncVisible(!actualVisible)">取消</button>
    </div>
  </div>
</template>

<script>
import VueBetterSync from &#39;vue-better-sync&#39;

export default {
  name: &#39;prompt&#39;,
  
  mixins: [
    VueBetterSync({
      prop: &#39;answer&#39;, // 设置 v-model 的 prop
      event: &#39;input&#39; // 设置 v-model 的 event
    })
  ],
  
  props: {
    answer: String,
    visible: {
      type: Boolean,
      sync: true // visible 属性可用 .sync 双向绑定
    }
  }
}
</script>

vue-better-sync 统一了 v-model 和 .sync 传递数据的方式，你只需 this.actual${PropName} = newValue 或者 this.sync${PropName}(newValue) 即可将新数据传递给父组件。

GitHub：fjc0k/vue-better-sync

3、使用 v-bind.sync修饰符

在某些情况下，我们可能需要对某一个 prop 进行“双向绑定”(除了前面用 v-model 绑定 prop 的情况)。为此，我们建议使用 update:myPropName 抛出事件。例如，对于在上一个示例中带有 title prop 的 ChildComponent，我们可以通过下面的方式将分配新 value 的意图传达给父级：

this.$emit('update:title', newValue)

如果需要的话，父级可以监听该事件并更新本地 data property。例如：

<childcomponent></childcomponent>

为了方便起见，我们可以使用 .sync 修饰符来缩写，如下所示：

<ChildComponent :title.sync="pageTitle" />

vue3 移除.syncrrreeerrreee

따라서 이 예에서 v-model은 다음의 약어입니다.

rrreee

Vue 3.x에서 사용자 정의 구성 요소의 v-model은 를 전달하는 것과 같습니다. modelValue prop을 실행하고 발생한 update:modelValue 이벤트를 수신합니다. rrreee

Vue3는 여러 v-model을 바인딩할 수 있습니다. 예를 들어 : <childcomponent v-model:title="pageTitle" v-model:name="pageName"></childcomponent>🎜🎜

vue - better-sync 플러그인🎜🎜이에 대한 요구가 있습니다: 사용자 입력의 동기화가 필요한 프롬프트 구성 요소를 개발하고 버튼을 클릭하여 팝업 창을 닫습니다. 🎜🎜🎜🎜일반 이렇게 하겠습니다. 🎜rrreee🎜컴포넌트를 한두 개 작성하는 것은 괜찮지만 일단 컴포넌트의 크기가 커지면 양방향 바인딩을 작성하면 실제로 문제가 발생할 수 있습니다. 따라서 생산성을 향상하기 위해 vue-better-sync 휠을 사용하여 프롬프트 구성 요소를 변환하는 방법을 살펴보겠습니다. 🎜rrreee🎜vue-better-sync는 v-model 및 .sync 전송 데이터 방식을 통합합니다. . This.actual${PropName} = newValue만 필요하거나 this.sync${PropName}(newValue)가 상위 구성 요소에 새 데이터를 전달하는 데 필요합니다. 🎜🎜GitHub: fjc0k/vue-better-sync🎜🎜

🎜3. v-bind.sync 수정자를 사용하세요🎜🎜🎜어떤 경우에는 특정 prop를 "양방향 바인딩"해야 할 수도 있습니다(v-bind를 사용한 이전 바인딩에 추가). model prop)을 결정하는 경우. 이를 위해 update:myPropName throw 이벤트를 사용하는 것이 좋습니다. 예를 들어 이전 예에서 제목 prop이 있는 ChildComponent의 경우 다음과 같이 부모에 새 값을 할당하려는 의도를 전달할 수 있습니다. 🎜rrreee🎜부모는 이벤트를 수신하고 필요한 경우 로컬 데이터 속성을 업데이트할 수 있습니다. 예: 🎜rrreee🎜 편의상 .sync 수정자를 사용하여 다음과 같이 축약할 수 있습니다. 🎜rrreee🎜🎜vue3 .sync 제거🎜🎜🎜[관련 권장 사항: 🎜vuejs 비디오 튜토리얼 🎜、 🎜웹 프론트엔드 개발🎜】🎜

위 내용은 Vue에서 양방향 바인딩을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!