vue2中component父子组件传递数据props的使用
子组件使用父亲传过来的数据,我们需要通过子组件的 props 选项。
组件实例的作用域是孤立的,不能在子组件的模板内直接引用父组件的数据。修改父亲传过来的props数据的时候 父亲必须传递对象,否则不能修改。
现在是传递对象的语法 app.vue(父组件):
<style scoped lang='stylus'> </style>
<template>
<div>
<h1>我是app组件</h1>
<zujian :data="data"></zujian>
</div>
</template>
<script>
import zujian from './components/zujian.vue'
export default{
data(){
return{
data:{
a:
}
}
},
components:{
zujian
}
}
</script>
zujian.vue(子组件):
<template>
<div>
<h1>{{data.a}}</h1>
<button @click="jia">+</button>
</div>
</template>
<script>
export default{
props:["data"], // 父亲传 谁用谁接受(儿子接受)
data(){
return{ }
},
methods:{
jia(){
console.log(this.data);
this.data.a++;
}
}
}
</script>
vue2中component父子组件传递数据props的使用的更多相关文章
- angularJS中directive父子组件的数据交互
angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...
- Vue基础-渲染函数-父子组件-传递数据
Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...
- VUE中父组件向子组件传递数据 props使用
VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent" ...
- vue 父子组件传递数据
单向数据流: 数据从父级组件传递给子组件,只能单向绑定. 子组件内部不能直接修改从父级传递过来的数据. 解决方法: 可以使用data将父组件传递过来的数据拷贝一份存放起来,再修改拷贝的数据就可以了 / ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- Vue2.x中的父子组件相互通信
业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template ...
- Vue : props 使用细节(父组件传递数据给子组件)
props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...
- vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- Vue2.0 【第二季】第8节 Component 父子组件关系
目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...
随机推荐
- JavaScript设计模式_05_发布订阅模式
发布-订阅模式,定义了对象间的一种一对多的依赖关系,当一个对象的状态发生变化时,所有依赖它的对象都将得到通知.发布-订阅模式是使用比较广泛的一种模式,尤其是在异步编程中. /* * pre:发布-订阅 ...
- eclipse下启动tomcat项目,访问tomcat默认端口显示404错误
解决:打开eclipse的server视图,双击你配置的那个tomcat,打开编辑窗口,查看server locations,看看是否选择了第一个选项(默认是第一个选项),即use workspace ...
- Scrapyd部署爬虫
Scrapyd部署爬虫 准备工作 安装scrapyd: pip install scrapyd 安装scrapyd-client : pip install scrapyd-client 安装curl ...
- AngularJS高级程序设计读书笔记 -- 过滤器篇
一. 过滤器基础 过滤器用于在视图中格式化展现给用户的数据. 一旦定义过滤器之后, 就可在整个模块中全面应用, 也就意味着可以用来保证跨多个控制器和视图之间的数据展示的一致性. 过滤器将数据在被指令处 ...
- ReactiveCocoa源码解析(二) Bag容器的代码实现
今天博客我接着上篇博客的内容来,上篇博客我们详细的看了ReactiveSwift中的Observer已经Event的代码实现.接下来我们来看一下ReactiveSwift中的结构体Bag的实现.Bag ...
- 门(door)
门(door) 时间限制: 1 Sec 内存限制: 128 MB 题目描述 输入 第一行是一个正整数n,表示原始字符串的长度.第二行是一个字符串,长度为n.字符串由大小写字母,数字,符号,空格构成. ...
- 从Html5直播到互动直播,看直播协议的选择
目前,国内主流的直播协议有HLS.RTMP.HTTP FLV,适用于不同的直播场景. 一.HLS.RTMP与HTTP FLV 1.HLS HLS 全称是 HTTP Live Streaming, 是一 ...
- jquery水平导航菜单展示
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- juggle添加c#版本
此前做过一个c++版的网络层dsl:http://www.cnblogs.com/qianqians/p/4255034.html 现在给这个dsl加入c#的支持,并且对代码的结构做了优化,将语法解析 ...
- MacTex XeLaTex xdvipdfmx:fatal: pdf_ref_obj(): passed invalid object. 报错的解决方法
在使用MacTex配合TexStudio编译beamer的时候,爆出如下错误, xdvipdfmx:fatal: pdf_ref_obj(): passed invalid object. 结果尝试其 ...