vue中的单项数据流
在VUE中，数据从父组件流向（传递）给子组件，只能单向绑定，在子组件内部不应该修改父组件传递过来的数据。
如果必须修改子组件中接收的数据，可以：
1. 作为data中局部数据，进行改动
2. 作为子组件中的computed树属性
例如，下面例子中，虽然可以实现count加1，但是会报错。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
<style>
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<custom-component v-bind:message="count"></custom-component>
</div>
<script>
Vue.component("custom-component",{
props: ['message'],
template:`
<div>
<h2>自定义组件</h2>
{{message}}
<input type="button" value="加一" v-on:click = "changeMssage" />
</div> `,
methods: {
changeMssage(){
this.message++;
}
}
})
new Vue({
el:"#app",
data(){
return {count: 0}
}
})
</script>
</body>
</html>
需要对上面进行改动如下：
<script>
Vue.component("custom-component",{
props: ['message'],
data(){
return {
plus: this.message // data必须以函数形式返回数据
}
},
template:`
<div>
<h2>自定义组件</h2>
{{plus}}
<input type="button" value="加一" v-on:click = "changeMssage" />
</div> `,
methods: {
changeMssage(){
this.plus++;
}
}
})
new Vue({
el:"#app",
data(){
return {count: 0}
}
})
</script>vue中的单项数据流的更多相关文章
- Vue组件中的单项数据流
当子组件中的input v-model 父组件的值时不能直接绑定props的值要使用计算属性,向下面的写法,因为props是单项数据流,子组件不能改变父组件的状态,直接绑定会报错. 还可以这样写:但是 ...
- Vue 中数据流组件
好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的 ...
- vue中的双向数据绑定详解
前言 什么是数据双向绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也算是vue的精髓之处了.值得注意的是,我 ...
- Vue_(组件通讯)单项数据流
Vue单项数据流 传送门 单向数据流:父组件值的更新,会影响到子组件,反之则不行 修改子组件的值: 局部数据:在子组件中定义新的数据,将父组件传过来的值赋值给新定义的数据,之后操作这个新数据 如果对数 ...
- vue-父子组件之传值和单项数据流问题
前言 我们知道 vue 中父子组件的核心概念是单项数据流问题,props 是单项传递的.那究竟什么是单项数据流问题,这篇文章来总结一下关于这个知识点的学习笔记. 正文 1.父组件传值给子组件 < ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- Vue中的methods、watch、computed
看到这个标题就知道这篇文章接下来要讲的内容,我们在使用vue的时候methods.watch.computed这三个特性一定经常使用,因为它们是非常的有用,但是没有彻底的理解它们的区别和各自的使用场景 ...
- vue中关于prop
组件之间的项目通信在vue中十分常见,父组件的数据传到子组件需要prop的支持,我们来看下prop 1.html的特性名大小写不敏感,浏览器会把所有大写字母解释为小写字母,使用dom模板时,使用等价的 ...
- Vue中v-on的指令以及一些其他指令
1.v-on的基本使用 <div id="app"> <!-- 使用事件绑定的简写形式 --> <input type="button&qu ...
随机推荐
- SQL语句结合上下文查询（in查询）
在多个表联合查询时,使用linq语句查询就显得不那么方便了,执行效率也不高, SQL语句查询的优势就显现出来了. using (var context = new YZS_TRAEntities()) ...
- 缓存那些事-zz
https://tech.meituan.com/cache_about.html 前言 一般而言,现在互联网应用(网站或App)的整体流程,可以概括如图1所示,用户请求从界面(浏览器或App界面)到 ...
- Python实例---模拟微信网页登录(day1)
第一步:创建Django项目 创建Django项目,添加App 创建静态文件夹static 修改settings.py文件 1. 取消csrf注释 2. 添加静态文件路径 # 添加静态文件路径 STA ...
- 【转】Java学习---Java中volatile关键字实现原理
[原文]https://www.toutiao.com/i6592879392400081412/ 前言 我们知道volatile关键字的作用是保证变量在多线程之间的可见性,它是java.util.c ...
- Go语言学习笔记（四）结构体struct & 接口Interface & 反射reflect
加 Golang学习 QQ群共同学习进步成家立业工作 ^-^ 群号:96933959 结构体struct struct 用来自定义复杂数据结构,可以包含多个字段(属性),可以嵌套: go中的struc ...
- MySQL主从延迟如何解决？
我们知道生产环境中经常会遇到MySQL主从延迟问题,从原理上也能看出主库的事务提交是并发模式,而从库只有一个SQL线程负责解析,所以本身上就可能存在延迟. 延迟的主要原因在于: 1.从库的配置往往没有 ...
- Mysql缓存中innodb_buffer_pool与Qcache的区别
innodb buffer pool和Qcache的缓存区别? 1.Qcacche缓存的是SQL语句及对应的结果集,缓存在内存,最简单的情况是SQL一直不重复,那Qcache的命令率肯定是0; 2.b ...
- 记录一次mysql使用load into命令导入csv格式数据的过程
今天从qwiklab实验获取一组数据,大概有5万条,在qwiklab实验室使用的是pgsql数据库,但是今天想把他插入本地的mysql数据库中. 1.首先是查看一下数据内容: 数据中有的是空值,有的是 ...
- 小渣渣的json和jsonp和ajax的实质和区别
json和jsonp和ajax的实质和区别ajax的两个问题 1.ajax以何种格式来交换数据 2.跨域的需求如何解决 数据跨域用自定义字符串或者用XML来描述 跨域可以用服务器代理来解决jsonp来 ...
- html简单介绍（一）
什么是html HTML 是用来描述网页的一种语言.HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言,而是一种标记语言 (markup ...