vue的.sync修饰符用法及原理详解

news/2025/2/14 4:29:18/

.sync 作用
当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。

.sync 原理
利用EventBus,子组件触发事件,父组件响应事件并实现数据的更新,避免由子组件直接修改父组件传过来的内容。(如果子组件直接操作,vue会有警告提示)。

v-on:update:word="wrd = $event" 则被简写为 :show.word

//父组件<template><div class="hello">父级的内容<input type="text" v-model="wrd"><br /><br /><box :word.sync="wrd"></box></div>
</template>
<script>
import box from "./components/child"; //引入box子组件
export default {name: "HelloWorld",data() {return {wrd: ""};},components: {box}
};
//子组件<template><div class="hello"><div class="ipt">子级的内容 <input type="text" v-model="str"></div><h2>{{ word }}</h2></div>
</template>
<script>
export default {name: "box",data() {return {str: ""};},props:['word'],watch: {str: function(newValue, oldValue) {//每当str的值改变则发送事件update:word , 并且把值传过去this.$emit("update:word", newValue);}}
};


http://www.ppmy.cn/news/1185952.html

相关文章

优先队列PriorityQueue

前言 PriorityQueue这个队列不知道大家使用过吗&#xff0c;反正我用的很少&#xff0c;主要对它不是很了解&#xff0c;今天我带领大家剖析下PriorityQueue这个优先级队列。 PriorityQueue介绍 顾名思义&#xff0c;PriorityQueue是优先队列的意思。优先队列的作用是能保证每…

JavaScript_Pig Game重置游戏

//重置游戏 btnNew.addEventListener(click, function () {score0El.textContent 0;score1El.textContent 0;current0El.textContent 0;current1El.textContent 0;player0El.classList.remove(player--winner);player1El.classList.remove(player--winner);player0El.class…

品牌加盟商做信息展示预约小程序的效果如何

很多行业都有中部或头部品牌&#xff0c;对实体品牌企业来说想要快速高效发展&#xff0c;除了多地直营店外还需要招募加盟商进而提升生意营收。 因此线上渠道变得尤为重要&#xff0c;除了网站外&#xff0c;小程序是连接多平台生态很好的工具&#xff0c;随时打开、直接触达…

昂首资本严肃且专业地探讨波浪理论第一波

很多投资者已经了解了波浪理论第一波&#xff0c;今天昂首资本和各位投资者再加深一下理解&#xff0c;让我们严肃且专业地探讨一下第一波。 以小时价格图表举例&#xff0c;第一波的起始点存在一个看涨反转棒。请注意&#xff0c;这个棒形结构对应了比尔威廉姆斯交易策略三智…

好文章推荐

文章目录 [常见限流算法&#xff1a;计数器、滑动窗口、漏桶、令牌桶] [常见限流算法&#xff1a;计数器、滑动窗口、漏桶、令牌桶]’ [常见限流算法&#xff1a;计数器、滑动窗口、漏桶、令牌桶]’

需要下微信视频号视频的小伙伴们看过来~

随着视频号的热度越来越大&#xff0c;下载视频号视频的需求也开始增加啦&#xff0c;今天给大家给分享几个简单实用的下载方法&#xff0c;总有一个你能用上的&#xff01; 一、犀牛视频下载 犀牛视频下载器可以直接解析并下载视频号短视频。您只需转发视频到机器人即可下载。…

css画一条虚线,用到background-image:linear-gradient线性渐变的属性

CSS实现虚线的方法_css 虚线_saltlike的博客-CSDN博客 渐变属性(background-image)全解析_background-image linear_大聪明码农徐的博客-CSDN博客 Background:linear-gradient()详解_background: linear-gradient_小白白中之白的博客-CSDN博客 注意&#xff1a; 必须要写高…

c#使用委托执行带有超时检查的方法.

namespace TimeOutHelper {internal class Program{// 定义一个泛型委托&#xff0c;用于定义带有超时检查的方法的签名public delegate TR TimeOutDelegate<in T, out TR>(T param);private static void Main(){Dictionary<Guid, string> result;// 调用TimeoutFu…