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

　　可以使用 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. Spark history server 遇到的一些问题

    最近学习Spark,看了一个视频,里面有提到启动spark后,一般都会启动Spark History Server.视频里把 spark.history.fs.logDirectory 设置成了Had ...

  2. RabbiMQ原理与SpringBoot使用

    RabbiMQ介绍 具体代码可参考我的github:https://github.com/UniqueDong/springboot-study 一.使用场景 RabbitMQ是一个消息中间件,所以最 ...

  3. JSP 不同版本（转）

    转自 http://blog.csdn.net/sunnyyoona/article/details/51076823

  4. 洛谷P2971 牛的政治Cow Politics

    题目描述 Farmer John's cows are living on \(N (2 \leq N \leq 200,000)\)different pastures conveniently n ...

  5. p标签间距问题

    用<p></p>标签写文本时,控制行与行之间的高度最好用line-height,不要用margin或padding:   因为P标签本身就带有一定的上下间距,且自带的间距在模拟 ...

  6. net core (下)

    net core (下) 第一部分: https://www.cnblogs.com/cgzl/p/8450179.html 本文是基于Windows10的. Debugging javascript ...

  7. 通过sqlserver sa密码修改windows操作系统密码

    如果你不记得windows管理员的密码了,但知道sqlserver sa用户的密码,可以通过以下方式修改: 进入SQL之后执行以下语句: -- 允许配置高级选项  EXEC sp_configure ...

  8. Spring连接数据库

    public class Book { private int bookid; private String bookname; private String bookauthor; private ...

  9. Linq 根据list属性去重复

    s.Where((x, i) => s.FindIndex(z => z.ArticleTitle == x.ArticleTitle) == i).ToList();

  10. MySQL memory引擎 table is full 问题处理

    解决mysql的内存表“table is full”错误   101209 13:13:32 [ERROR] /usr/local/mysql/bin/mysqld: The table ‘test_ ...