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 ...
随机推荐
- BOM(1)
BOM 浏览器对象模型(Browser Object Model),使浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话". 浏览器对象模型(Browser ...
- (文件)图片上传,Spring或SpringMVC框架
spring或springMVC框架图片(文件)上传 页面部分,用一个简单的form表单提交文件,将图片或文件提交到服务端.一个输入框,用于输入图片的最终名称,一个file文件选择,用于选择图片. 页 ...
- (转)让浏览器支持Webp
转载:https://segmentfault.com/a/1190000005898538?utm_source=tuicool&utm_medium=referral Webp介绍 web ...
- ActiveMQ 和消息简介
Apache ActiveMQ 是远程系统间进行通信的消息代理,实现了 JMS(Java Message Service,Java 消息服务).尽管 ActiveMQ 是使用 Java 写的,但是其提 ...
- idea无法正常使用SVN的解决方法
问题描述: IntelliJ IDEA安装之后,使用SVN进行提交或更新以及检出代码的时候会出现如下错误: Cannot load supported formats: Cannot run prog ...
- MAC下解决eclipse卡顿或者运行慢的问题
提示:假设你已经装了固态硬盘,并且有至少8Gb的内存.如果没有的话,带来的性能提升可能不大. 1.eclipse中加载的SDK数量过多会导致程序运行缓慢,解决方法删除plaforms下面用不到的SDK ...
- 电脑上的windows键突然失灵了,肿么办
windows经常会用到,或许平时感觉不出异常来,偶尔用一次的时候,去发现失灵了,肿么办? 如果只是单纯的弹出开始菜单来,可以按Ctrl+Esc,功能是一样的. 这种情况其实是windows被禁用了, ...
- Haoop MapReduce 的Partition和reduce端的二次排序
先贴一张原理图(摘自hadoop权威指南第三版) 实际中看了半天还是不太理解其中的Partition,和reduce端的二次排序,最终根据实验来结果来验证自己的理解 1eg 数据如下 20140101 ...
- AospExtended K3 Note最新官方版 Android7.1.2 极速 省电 流畅 Galaxy XIAOMI Moto Lenovo Coolpad 均支持
AospExtended 最新官方版 Android7.1.2 极速 省电 流畅 Galaxy XIAOMI Moto Lenovo Coolpad 均支持 之前用过1629开发版等,体验了很 ...
- php倒计时防刷新
<?php //php的时间是以秒算.js的时间以毫秒算 date_default_timezone_set("Asia/Hong_Kong");//地区 //配置每天的活动 ...