[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"> < ...
随机推荐
- html2canvas - 微信中长按存图 - 将h5活动结果保存到本地
现在有很多在微信里流行的h5活动页.这些小h5大部分都是简单的交互然后得出一个abcd早就拟定好的结果,根据你的选项分几种情况,最终得到其中一个作为你测试的答案.比如这个就是最后那张结果图: 当时自己 ...
- 【Eclipse】Ubuntu 下菜单栏失效了，怎么办？（已解决）
如果你的 Ubuntu 的版本是 13.10 , 且你又安装了 Eclipse , 你就会发现 Eclipse 的菜单不起作用了. 就是点击 File , Edit ... 这些菜单,不会显示子菜单了 ...
- iframe内点击a标签禁止滚动到顶部
在iframe内加载的表中,操作下的按钮用a标签布局,但是会出现一个非常不好的体验,就是当页面有滚动条的时候,点击a标签,列表会自动滚动到顶部. 首先看我的a标签: <a href=" ...
- ubuntu下文件压缩/解压缩
ubuntu下文件压缩/解压缩 http://blog.csdn.net/luo86106/article/details/6946255 .gz 解压1:gunzip FileName.gz 解压2 ...
- Win8安装msi程序出现2502、2503错误解决方法
在Win8中,在安装msi安装包的时候常常会出现代码为2502.2503的错误.其实这种错误是由于安装权限不足造成的,因为这种msi的安装包不像其他exe的安装程序, 在安装包上点击"右键& ...
- 【C#】基础知识
C#常用函数表1.DateTime 数字型 System.DateTime currentTime=new System.DateTime(); 1.1 取当前年月日时分秒 currentTime=S ...
- 兵器簿之cocoaPods的安装和使用
以前添加第三方库的时候总是直接去Github下载然后引入,但是如果这些第三方库发生了更新,我们还需要手动去更新项目,所以现在引入之前一直想弄都一直没有弄的cocoaPods,现在演示一把过程 其实非常 ...
- Spark2 Dataset分析函数--排名函数row_number,rank,dense_rank,percent_rank
select gender, age, row_number() over(partition by gender order by age) as rowNumber, ...
- 8.11 数据库ORM(5)
2018-8-11 20:43:52 昨天从俺弟家回来了. 和俺弟聊天发现,他一直停留在自己目前的圈子,自己觉得很牛逼,比别人高人一等,, 读书无用论,,可以用 幸存者偏激理论 大概就是这个 可以否决 ...
- 设置ubuntu默认中文字符
一. Ubuntu默认的中文字符编码 Ubuntu默认的中文字符编码为zh_CN.UTF-8,这个可以在 /etc/environment中看到:sudo gedit /etc/environment ...