<body>

    <div id="example">

        <father></father>

    </div>

</body>

<script>

    Vue.component('child', {

        // 声明 props

        props: ['message'],

        // 就像 data 一样，prop 可以用在模板内

        // 同样也可以在 vm 实例中像 “this.message” 这样使用

        template: '<span>{{ message }}</span>'

    })

    Vue.component('father', {

        template: '<child message="hello!"></child>'

    })

    new Vue({

        el: '#example'

    })

</script>

</html>

vuejs组件通信的更多相关文章

  1. Vuejs——（10）组件——父子组件通信

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

  2. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  3. VUE 组件通信总结

    1.prop 父组件传递给子组件,即通过VUE本身具有的Props属性来传递值 Child组件 <template> <span>{{message}}</span> ...

  4. 深入理解 Vuejs 组件

    本文主要归纳在 Vuejs 学习过程中对于 Vuejs 组件的各个相关要点.由于本人水平有限,如文中出现错误请多多包涵并指正,感谢.如果需要看更清晰的代码高亮,请跳转至我的个人站点的 深入理解 Vue ...

  5. vue2.0父子组件以及非父子组件通信

    官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...

  6. element-ui源码之组件通信那些事

    最近在用element-ui重构前端项目,无意之中翻阅到一个比较好用的组件间通信方式,借助于vue的封装的发布-订阅消息模式与mixin语法.在开始之前先总结下vue常用的组件间通信方式,具体如下: ...

  7. vue组件通信全面总结

    写在前面 组件间的通信是是实际开发中非常常用的一环,如何使用对项目整体设计.开发.规范都有很实际的的作用,我在项目开发中对此深有体会,总结下vue组件间通信的几种方式,讨论下各自的使用场景 文章对相关 ...

  8. 【Vue组件通信】props、$ref、$emit，组件传值

    1.什么是组件通信 组件间如何通信,也就成为了vue中重点知识,组件通信,涉及到组件之间数据的传递.类似NET POST/GET参数传递. Vue基本的三种传递方式** (props.\(ref.\) ...

  9. 关于React的父子组件通信等等

    //==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...

随机推荐

  1. caffe 中如何打乱训练数据

    第一: 可以选择在将数据转换成lmdb格式时进行打乱: 设置参数--shuffle=1:(表示打乱训练数据) 默认为0,表示忽略,不打乱. 打乱的目的有两个:防止出现过分有规律的数据,导致过拟合或者不 ...

  2. sql 转 markdown

    https://github.com/2liang/AutoBuildDocFromDB SQL脚本生成数据字典 http://www.jianshu.com/p/f491d0d3c503 这两个脚本 ...

  3. unity, 慎用DontDestroyOnLoad

    如果想让一个节点切换场景时不销毁,可以为它添加如下脚本: using UnityEngine;using System.Collections; public class dontDestroyOnL ...

  4. Atitit.java 反编译 工具  attilax 总结

    Atitit.java 反编译 工具  attilax 总结 1. 三大核心核心引擎——1 2. JAD  Jad  attitude推荐这个1 2.1. Jdec.2 2.2. 二. 源码开放的 J ...

  5. 基于Away3D实现全景的相机控制器。

    最近研究打算做个全景的Demo,发现Away3D本身的天空盒跟全景属于两种完全不同东西.最后只能基于HoverController来扩展(原因是HoverController能提供的距离控制,类似拉近 ...

  6. swoole-1.7.18 版本已发布，支持 PHP7

    swoole-1.7.18 版本已发布,支持 PHP7 matyhtf 发布于: 2015年07月23日 (22评) 分享到:    收藏 +16 3月19日,深圳源创会火热报名中,go>> ...

  7. HDU - 5017 Ellipsoid(模拟退火法)

    Problem Description Given a 3-dimension ellipsoid(椭球面) your task is to find the minimal distance bet ...

  8. spring 第一篇（1-3）：鸟瞰spring蓝图

    如你所见,spring框架的核心是关注于如何使用DI.AOP和模板来让企业级java开发变得更简单.spring确实也是这样做的,所以很值得你去使用它.不过spring内容可能比你所能看到的要多很多. ...

  9. ServletContext与Web应用以及Spring容器启动

    一.ServletContext对象获取Demo Servlet容器在启动时会加载Web应用,并为每个Web应用创建唯一的ServletContext对象. 可以把ServletContext看作一个 ...

  10. hdu2588 GCD 给定n，m。求x属于[1,n]。有多少个x满足gcd(x,n)>=m; 容斥或者欧拉函数

    GCD Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s): Accepted Sub ...