子组件使用父亲传过来的数据,我们需要通过子组件的 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的使用的更多相关文章

  1. angularJS中directive父子组件的数据交互

    angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...

  2. Vue基础-渲染函数-父子组件-传递数据

    Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...

  3. VUE中父组件向子组件传递数据 props使用

    VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent" ...

  4. vue 父子组件传递数据

    单向数据流: 数据从父级组件传递给子组件,只能单向绑定. 子组件内部不能直接修改从父级传递过来的数据. 解决方法: 可以使用data将父组件传递过来的数据拷贝一份存放起来,再修改拷贝的数据就可以了 / ...

  5. 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

    前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...

  6. Vue2.x中的父子组件相互通信

    业务场景:(这里指的是直接父子级关系的通信) 美女(子组件)将消息发送给大群(父组件) 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件) 父组件 template <template ...

  7. Vue : props 使用细节(父组件传递数据给子组件)

    props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...

  8. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  9. Vue2.0 【第二季】第8节 Component 父子组件关系

    目录 Vue2.0 [第二季]第8节 Component 父子组件关系 第8节 Component 父子组件关系 一.构造器外部写局部注册组件 二.父子组件的嵌套 Vue2.0 [第二季]第8节 Co ...

随机推荐

  1. BOM(1)

    BOM 浏览器对象模型(Browser Object Model),使浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话". 浏览器对象模型(Browser ...

  2. (文件)图片上传,Spring或SpringMVC框架

    spring或springMVC框架图片(文件)上传 页面部分,用一个简单的form表单提交文件,将图片或文件提交到服务端.一个输入框,用于输入图片的最终名称,一个file文件选择,用于选择图片. 页 ...

  3. (转)让浏览器支持Webp

    转载:https://segmentfault.com/a/1190000005898538?utm_source=tuicool&utm_medium=referral Webp介绍 web ...

  4. ActiveMQ 和消息简介

    Apache ActiveMQ 是远程系统间进行通信的消息代理,实现了 JMS(Java Message Service,Java 消息服务).尽管 ActiveMQ 是使用 Java 写的,但是其提 ...

  5. idea无法正常使用SVN的解决方法

    问题描述: IntelliJ IDEA安装之后,使用SVN进行提交或更新以及检出代码的时候会出现如下错误: Cannot load supported formats: Cannot run prog ...

  6. MAC下解决eclipse卡顿或者运行慢的问题

    提示:假设你已经装了固态硬盘,并且有至少8Gb的内存.如果没有的话,带来的性能提升可能不大. 1.eclipse中加载的SDK数量过多会导致程序运行缓慢,解决方法删除plaforms下面用不到的SDK ...

  7. 电脑上的windows键突然失灵了,肿么办

    windows经常会用到,或许平时感觉不出异常来,偶尔用一次的时候,去发现失灵了,肿么办? 如果只是单纯的弹出开始菜单来,可以按Ctrl+Esc,功能是一样的. 这种情况其实是windows被禁用了, ...

  8. Haoop MapReduce 的Partition和reduce端的二次排序

    先贴一张原理图(摘自hadoop权威指南第三版) 实际中看了半天还是不太理解其中的Partition,和reduce端的二次排序,最终根据实验来结果来验证自己的理解 1eg 数据如下 20140101 ...

  9. AospExtended K3 Note最新官方版 Android7.1.2 极速 省电 流畅 Galaxy XIAOMI Moto Lenovo Coolpad 均支持

    AospExtended 最新官方版 Android7.1.2 极速 省电 流畅 Galaxy  XIAOMI Moto  Lenovo  Coolpad  均支持 之前用过1629开发版等,体验了很 ...

  10. php倒计时防刷新

    <?php //php的时间是以秒算.js的时间以毫秒算 date_default_timezone_set("Asia/Hong_Kong");//地区 //配置每天的活动 ...