[vue]实现父子组件数据双向绑定
参考: http://www.cnblogs.com/xxcanghai/p/6124699.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<switchbtn :result="result" @on-result-change="onResultChange"></switchbtn>
<input type="button" value="change" @click="change">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
Vue.component("switchbtn", {
template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
props: ["result"],
data: function () {
return {
myResult: this.result//①创建props属性result的副本--myResult
};
},
watch: {
result(val) {
this.myResult = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
},
myResult(val) {
//xxcanghai 小小沧海 博客园
this.$emit("on-result-change", val);//③组件内对myResult变更后向外部发送事件通知
}
},
methods: {
change() {
this.myResult = !this.myResult;
}
}
});
new Vue({
el: "#app",
data: {
result: true
},
methods: {
change() {
this.result = !this.result;
},
onResultChange(val) {
this.result = val;//④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
}
}
});
</script>
</body>
</html>
[vue]实现父子组件数据双向绑定的更多相关文章
- Vue父子组件数据双向绑定，子组件可修改props
第一种,子组件通过监听父组件数据,子组件改变数据之后通知给父组件 原文链接:https://blog.csdn.net/m0_37728716/article/details/81776929 父组件 ...
- Vue的父子组件v-model双向绑定，父组件修改子组件中绑定的v-model属性
先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
- vue 父子组件数据双向绑定
父组件 <find-search v-model="searchshow"></find-search> 子组件 props: { value: { typ ...
- vue 利用v-model实现父子组件数据双向绑定
v-model父组件写法: v-model子组件写法: 子组件export default中的model:{}里面两个值,prop代表着我要和props的那个变量相对应,event表示着事件,我触发事 ...
- VUE JS 使用组件实现双向绑定
1.VUE 前端简单介绍 VUE JS是一个简洁的双向数据绑定框架,他的性能超过ANGULARJS,原因是实现的机制和ANGULARJS 不同,他在初始化时对数据增加了get和set方法,在数据se ...
- [vue]通过watch实现数据双向绑定
modal:单向绑定 <head> <meta charset="UTF-8"> <title>test</title> <s ...
- sync 简单实现 父子组件的双向绑定
这里主要是对vue文档中的sync进行一个再解释: 如果自己尝试的话,最好在已经使用emit 和prop实现了双向绑定的组件中尝试,以免出现不必要的错误: <!DOCTYPE html> ...
- vue Object.defineProperty Proxy 数据双向绑定
Object.defineProperty 虽然已经能够实现双向绑定了,但是他还是有缺陷的. 只能对属性进行数据劫持,所以需要深度遍历整个对象 对于数组不能监听到数据的变化 虽然 Vue 中确实能检测 ...
- 关于vue.js父子组件数据传递
vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...
随机推荐
- jQuery给动态添加生成的元素绑定事件的方法
<div id="testdiv"> <ul></ul> </div> 需要给<ul>里面动态添加的<li&g ...
- 【架构师之路】 LVS+Keepalived实现高可用负载均衡
一.原理 1.概要介绍 如果将TCP/IP划分为5层,则Keepalived就是一个类似于3~5层交换机制的软件,具有3~5层交换功能,其主要作用是检测web服务器的状态, ...
- 【cs229-Lecture14】主成分分析法
本节课内容: 因子分析 ---因子分析中的EM步骤的推导过程 主成份分析:有效地降低维度的方法 因子分析 混合高斯模型的问题 接下来讨论因子分析模型,在介绍因子分析模型之前,先看高斯分布的另一种写法, ...
- 深入理解 Neutron -- OpenStack 网络实现（1）：GRE 模式
问题导读1.什么是VETH.qvb.qvo?2.qbr的存在的作用是什么?3.router服务的作用是什么? 如果不具有Linux网络基础,比如防火墙如何过滤ip.端口或则对openstack ovs ...
- 深入学习Make命令和Makefile（下）
https://www.zybuluo.com/lishuhuakai/note/209300 make是Linux下的一款程序自动维护工具,配合makefile的使用,就能够根据程序中模块的修改情况 ...
- 记录一次OOM排查经历（一）
一.经历概要 程序里有个跑数据的job,这个job的主要功能是往数据库写假数据. 既需要跑历史数据(传给job的日期是过去的时间),也需要能够上线后,实时跑(十秒钟触发一次,传入触发时的当前时间). ...
- JavaScript 异步进化史
前言 JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback.对于简单的异步操作 ...
- 虚拟机VMware怎么完全卸载干净，如何彻底卸载VMware虚拟机
亲测好使. 1.禁用VM虚拟机服务 首先,需要停止虚拟机VMware相关服务.按下快捷键WIN+R,打开windows运行对话框,输入[services.msc],点击确定.如下图. 在服务管理中,找 ...
- 在linux上执行.net Console apps
有个程序,在.net下写了半天,总算跑起来了,发现有个问题,在windows上不好弄,而同事前一段时间已经有Linux下的解决方法了,于是想直接将.net程序放在linux下运行 在linux上的mo ...
- [SharePoint 2010] SharePoint 2010 FBA 配置以及自定义首页
https://blogs.msdn.microsoft.com/kaevans/2010/07/09/sql-server-provider-for-claims-based-authenticat ...