1. 程式人生 > >關於vue使用修飾符.sync修飾符實現雙向資料繫結沒效果的一個原因(坑)

關於vue使用修飾符.sync修飾符實現雙向資料繫結沒效果的一個原因(坑)

我們知道元件是單項的,但是有時候需要雙向,這時候我們可以使用.sync修飾符,但今天遇到一個坑,一直不成功,花了半小時試出來的。。。。
在程式設計的時候我們很習慣冒號後面跟著空格。而.sync雙向繫結需要子元件顯性觸發
this.$emit('update:foo', newValue)
這裡的updata:foo可以說是一個名字,不能加空格,不能加空格,不能加空格!!!這就是坑,由於程式設計習慣,也許會有人加空格,我也是,所以寫出來當作一個筆記。
根據文件
<comp :foo.sync="bar"></comp>.
會被擴充套件為:
<comp :foo="bar" @update:foo="val => bar = val"></comp>
所以update:foo就是事件的名稱,事件裡面是一個函式,傳入val引數賦值給bar變數。。。。所以update:foo是一個事件名,你加空格就完全變了一個事件名了。
至於怎麼變,估計得看文件,我也不懂-_-

相關推薦

關於vue使用修飾.sync修飾實現雙向資料效果一個原因()

我們知道元件是單項的,但是有時候需要雙向,這時候我們可以使用.sync修飾符,但今天遇到一個坑,一直不成功,花了半小時試出來的。。。。在程式設計的時候我們很習慣冒號後面跟著空格。而.sync雙向繫結需要子元件顯性觸發this.$emit('update:foo', newVa

vue實現雙向資料之原理及實現vue雙向原理及實現

轉自:canfoo#! vue的雙向繫結原理及實現 前言 先上個成果圖來吸引各位: 程式碼:                          &nb

vue實現雙向資料原理,使用了Object.defineproperty()方法,方法簡單

在vue中雙向資料繫結原理,我們一般都是用v-model來實現的 ,但一般在面試話會問到其實現的原理, 方法比較簡單,就是利用了es5中的一個方法.Object.defineproperty(),它有三個引數, Object.defineproperty(obj,'val',attrObject), 引數

Vue實現雙向資料的新姿勢

在Vue中實現資料繫結還是相當靈活的,可以通過屬性和指令兩種方式來實現 先來看看第一種方式使用ref屬性來來實現雙向資料繫結 <!DOCTYPE html> <html> <head> <meta charset="UTF-

Vue.js實現雙向資料(表單自動賦值、表單自動取值)

1、使用Vue.js實現雙向表單資料繫結,例子 <!--html程式碼--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

Vue.js學習筆記】5:雙向資料,計算屬性

雙向資料繫結 雙向資料繫結往往會用到input、select、textarea等表單標籤上,因為總是涉及一個數據資料的地方和輸出資料的地方。 當資料發生變化的時候,檢視也就發生變化,當檢視發生變化的時候,資料也會跟著同步變化。 資料雙向繫結,一定是對於UI控制元件來說的,

javaScript怎麼實現雙向資料

前言 談起當前前端最熱門的 js 框架,必少不了 Vue、React、Angular,對於大多數人來說,我們更多的是在使用框架,對於框架解決痛點背後使用的基本原理往往關注不多,近期在研讀 Vue.js 原始碼,也在寫原始碼解讀的系列文章。 和多數原始碼解讀的文章不同的是

Vue元件中利用.sync修飾實現對prop進行雙向資料

在有些情況下,我們可能需要對一個 prop 進行“雙向繫結”。不幸的是,真正的雙向繫結會帶來維護上的問題,因為子元件可以修改父元件,且在父元件和子元件都沒有明顯的改動來源。 所以官方推薦以update:my-prop-name 的模式觸發事件取而代之 為了好理解,我寫了一

Vue 框架-03-鍵盤事件、健值修飾雙向資料

Vue 框架-03-鍵盤時間及健值修飾符 一、鍵盤事件,當按鍵盤時,在控制檯輸出提示 html 原始碼: <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

簡單實現VUE雙向資料

<!DOCTYPE html> <html> <head> <title>vue-雙向資料繫結的簡單實現</title> </head> <body> <input type="text" name="" id

vue 雙向資料實現學習(二)- 監聽器的實現

廢話:上一篇https://www.cnblogs.com/adouwt/p/9928278.html  提到了vue實現的基本實現原理:Object.defineProperty() -資料劫持 和 釋出訂閱者模式(觀察者),下面講的就是資料劫持在程式碼中的具體實現。 1.先看如何呼

vue雙向資料實現

總所周知,偵測一個物件變化的方法,常用的兩種是Object.defineProperty,和es6的proxy,下面就基於Object.defineProperty實現簡單的雙向繫結 其實vue主要是通過Object.defineProperty實現的,至於vue3.0會不會重寫

vue.js和angular雙向資料實現原理

一、vue雙向資料繫結 1、原理 資料劫持: vue.js 是採用資料劫持結合釋出者-訂閱者模式的方式,通過Object.defineProperty()來劫持各個屬性的setter,getter,在資料變動時釋出訊息給訂閱者,觸發相應的監聽回撥。 2、實現步驟 要實現mv

Vue 雙向資料實現

  <!DOCTYPE html> <html> <head> <title>myVue</title> <style> #app{ text-align: center;

詳解 vue 雙向資料的原理,並實現一組雙向資料

1:vue 雙向資料繫結的原理: Object.defineProperty是ES5新增的一個API,其作用是給物件的屬性增加更多的控制Object.defineProperty(obj, prop, descriptor)引數 obj: 需要定義屬性的物件(目標物件)prop: 需被定義或修改的屬性名(物

【react】react實現類似vue雙向資料

import React from 'react' import ReactDOM from 'react-dom' class Comment extends React.Component { constructor() { sup

JavaScript實現簡單的雙向資料(Ember、Angular、Vue

什麼是雙向資料繫結呢? 簡單的說 就是UI檢視與資料繫結在了一塊 也就是資料和檢視是同步改變的 雙向資料繫結最常見的應用場景就是表單 (應用場景還是很有限的) 現在我們要實現這樣一個簡單的資料繫結 輸入欄中輸入字元 和它繫結的節點內容

Vue.js雙向資料實現

js中物件屬性型別有資料屬性和訪問器屬性,這裡實現簡單的雙向資料繫結是利用了物件的訪問器屬性中包含的get和set 修改屬性的預設特性使用Object.defineProperty()方法 addEventListener(event,function,useCapture

Vue】原始碼分析--雙向資料實現

總結 Vue的雙向資料繫結主要通過Object.defineProperty來實現,先為所有的屬性加上get/set的監控,這樣當屬性值改變時就會觸發對應的set方法,然後再在set方法中通過觀

面試題:你能寫一個Vue雙向資料嗎?

在目前的前端面試中,vue的雙向資料繫結已經成為了一個非常容易考到的點,即使不能當場寫出來,至少也要能說出原理。本篇文章中我將會仿照vue寫一個雙向資料繫結的例項,名字就叫myVue吧。結合註釋,希望能讓大家有所收穫。 1、原理 Vue的雙向資料繫結的原理相信大家也都十分了解了,主要是通過 Obje