詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別
更新時(shí)間：2018年06月26日 11:32:48 作者：Jason_and_Lisa
這篇文章主要介紹了詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
.sync修飾組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-03</title>
<!-- 引入Vue -->
<link rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div class="container" style="margin-top: 12px;">
<div id="demo" class="row">
{{ say }}
<br />
<my-input :value.sync="say"></my-input>
</div>
</div>
<script>
new Vue({
el: '#demo',
data: {
say: "123"
},
components: {
"my-input": {
props: ['value'],
template: "<div><input v-bind:value='value' v-on:input='change1' />{{value}}</div>",
watch: {
value: function(newValue, oldValue) {
alert('子組件value新舊值' + newValue + '/' + oldValue);
//this.$emit('update:value', newValue)
}
},
methods: {
change1: function(e) {
var v = e.target.value
this.$emit('update:value', v)
},
}
}
},
watch: {
say: function(n, o) {
alert('父組件新舊值' + n + '-' + o)
}
},
methods: {
}
})
</script>
</body>
v-model修飾組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-10</title>
<!-- 引入Vue -->
<link rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div class="container" style="margin-top: 12px;">
<div id="demo" class="row">
{{ say }}
<br />
<my-input v-model="say"></my-input>
</div>
</div>
<script>
new Vue({
el: '#demo',
data: {
say: "123"
},
components: {
"my-input": {
props: ['value'],
template: "<div><input v-bind:value='value' v-on:input='change' />{{value}}</div>",
watch: {
value: function(newValue, oldValue) {
alert('子組件value新舊值' + newValue + '/' + oldValue);
//this.$emit('update:value', newValue)
}
},
methods: {
change: function(e) {
this.$emit('input', e.target.value)
}
}
}
}
})
</script>
</body>
區(qū)別只能自己慢慢體會(huì),個(gè)人感覺(jué) .sync用法靈活,而v-model只能接受prop名為為value的值.
兩者都需要手動(dòng)觸發(fā)$emit方法.
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中組件(Component)和插件(Plugin)的區(qū)別及說(shuō)明
這篇文章主要介紹了Vue中組件(Component)和插件(Plugin)的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
vue使用監(jiān)聽(tīng)實(shí)現(xiàn)全選反選功能
最近做的項(xiàng)目用到了全選全不選功能，于是我就自己動(dòng)手寫(xiě)了一個(gè)，基于vue使用監(jiān)聽(tīng)實(shí)現(xiàn)全選反選功能，具體實(shí)例代碼大家參考下本文2018-07-07
淺談在vue項(xiàng)目中如何定義全局變量和全局函數(shù)
本篇文章主要介紹了淺談在vue項(xiàng)目中如何定義全局變量和全局函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
vue項(xiàng)目實(shí)現(xiàn)表單登錄頁(yè)保存賬號(hào)和密碼到cookie功能
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)表單登錄頁(yè)保存賬號(hào)和密碼到cookie功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
vue3?+?Ant?Design?實(shí)現(xiàn)雙表頭表格的效果(橫向表頭+縱向表頭)
這篇文章主要介紹了vue3?+?Ant?Design?實(shí)現(xiàn)雙表頭表格（橫向表頭+縱向表頭）,需要的朋友可以參考下2023-12-12
Vue+Node實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選，添加購(gòu)物車功能詳解
這篇文章主要介紹了Vue+Node實(shí)現(xiàn)商品列表的分頁(yè)、排序、篩選，添加購(gòu)物車功能,結(jié)合實(shí)例形式分析了vue.js前臺(tái)商品分頁(yè)、排序、篩選等功能及后臺(tái)node.js處理技巧,需要的朋友可以參考下2019-12-12
vue項(xiàng)目中自定義video視頻控制條的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目中自定義video視頻控制條的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
Vue3中的常見(jiàn)組件通信之v-model使用詳解
這篇文章主要介紹了Vue3中的常見(jiàn)組件通信之v-model使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要給大家介紹了關(guān)于Vue實(shí)例掛載的過(guò)程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
vue實(shí)現(xiàn)微信公眾號(hào)h5跳轉(zhuǎn)小程序的示例代碼
本文主要介紹了vue實(shí)現(xiàn)微信公眾號(hào)h5跳轉(zhuǎn)小程序的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08