组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。

　　可以使用 props 把数据传给子组件。

　　　　

　　　　for-child-msg="aaa"  ，

　　　　for-child-msg可以当变量名，''aaa''是要传递给子组件的数据

　　　　子组件props：[for-child-msg]  接受父组件传递过来的变量名

　　　　 {{forChildMsg}}  父组件传递过来的数据

　　

　　

　　

　　　　html:

　　　　

7.Props向子组件传递数据的更多相关文章

  1. vue 父组件通过props向子组件传递数据/方法的方式

    参考网址:https://segmentfault.com/a/1190000010507616 下面栗子中, callback是传递父组件的方法, mutationName是传递父组件的数据, Ap ...

  2. vue单文件组件形成父子（子父）组件之间通信（vue父组件传递数据给子组件，子组件传递数据给父组件）

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

  3. vuejs动态组件给子组件传递数据

    vuejs动态组件给子组件传递数据 通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component> ...

  4. vue 父向子组件传递数据，子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  5. vue 子组件传递数据跟父组件

    子组件 <body> <div v-on:click="test"></div> <script> export default { ...

  6. vue $emit $on 从子组件传递数据给父组件

    原理是: 子组件使用$emit发送数据,父组件使用$on,或者v-on绑定, 来监听子组件发送的数据. 子组件: <button @click="sendChildData" ...

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

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

  8. vue——父组件向子组件传递数据

    看例子: //注册一个全局组件,组件标签名为child Vue.component('child', { props: ['msg'], //接收父组件传递的数据 template: '<h3& ...

  9. Vue子组件传递数据给父组件

    子组件通过this.$emit(event,data)传递数据到父组件 以下是例子: father.vue 父组件 <template> <div> <child @ne ...

随机推荐

  1. vue路由守卫

    路由守卫 //路由进来之时 beforeRouteEnter(to, from, next) { console.log(this, 'beforeRouteEnter'); // undefined ...

  2. Shaderlab blend

    http://www.cnblogs.com/daxiaxiaohao/p/4059310.html 1.不透明度 当我们要将两个半透的纹理贴图到一个材质球上的时候就遇到混合的问题,由于前面的知识我们 ...

  3. IT兄弟连 JavaWeb教程 AJAX定义以及解决的问题

    Ajax是"Asynchronous JavaScript And XML"的缩写(即:异步的JavaScript和XML),是一种实现无页面刷新获取服务器数据的混合技术,Ajax ...

  4. Codeforces 1167F（计算贡献）

    要点 容易想到排序,然后对于每个数: 人的惯性思维做法是:\(a[i]*(rank1的+rank2的+-)\).然而解法巧妙之处在于直接把所有的加和当成一个系数,然后先假装所有情况系数都是1,接着往上 ...

  5. redis--StringRedisTemplate和RedisTemplate区别

    StringRedisTemplate: 1).只能存储string类型的值,因此不能存储如对象 2).序列化为string,如: RedisTemplate: 1).可以存储任意类型,含对象. 2) ...

  6. Linux清空屏幕和清空当前输入的快捷键

    Linux清空屏幕和清空当前输入的快捷键 但是实际上...放弃当前的命令,命令行提示符跳到下一行的有效命令是ctrl + c

  7. 关于74HC4051的逻辑真值表及延时的重要性/在AD测量中的校准

    一 关于74HC4051: 在/E=0使能输出的条件下,S2S1S0的三个值,能选通Y0~Y7其中的一个通道从Z输出. 二:问题提出:在按照IC给出的真值表进行芯片操作时,输出逻辑完全对不上 三:分析 ...

  8. D. Edges in MST 图论

    http://codeforces.com/contest/160/problem/D base on 克鲁斯卡尔, 首先每次都是对权值相同的边进行统一处理,假如加入了当前这条边出现了回路,那就能确定 ...

  9. 前端js编码

    1.首先是encodeURI和encodeURIComponent: 从名字可以清晰的看出他两都是主要用于url编码的,那之间有什么区别呢?唯一区别就是编码的字符范围,其中 encodeURI方法不会 ...

  10. NIO学习之Channel

    一.Channel基础 通道是一个对象,通过它可以读取和写入数据,Channel就是通向什么的道路,为数据的流向提供渠道: 在传统IO中,我们要读取一个文件中的内容使用Inputstream,该str ...