vue.js 语法

Sending Data into a component requires Prop, Sending data out of Component requires Emit

Data Exchange between sibling component is achieved by Central Event Bus. Complicated sibling component data changes uses VueX

component包含 Template, Data, props, methods  其中Template是必须要的

Register component


install component






如果要从data() 里使用props的值: this.prop

send data out of component:


v-bind和v-model都是让external data进入的




经典啊😱😱😱😱

这里是一个使用event驱动emit 函数 把数据从component.data传递到Vue.data里的例子。这个例子展现了传入component以及传出component

首先Input的地方用v-model 和component.message绑定起来。 这样数据传入了component里。

然后定义Event: v-on: click='send'  调用了this.$emit()。 this.emit把message传入Vue.content里 通过v-on:relay='function' 这个Tag。 content注意! 在P tag里refer了。。。 {{content}}

V-model = V-bind + V-on



同时send Multiple data



Sibling components communication 





推荐阅读更多精彩内容

  • 语法糖是指在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发。 Vue.js 的 v-bind 和...
    Rinaloving阅读 261评论 0 1
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 1,349评论 0 6
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 1,577评论 0 1
  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 4,909评论 0 42
  • 深入响应式 追踪变化: 把普通js对象传给Vue实例的data选项,Vue将使用Object.defineProp...
    冥冥2017阅读 4,233评论 6 16
  • 有些女孩子是不是对直男有什么误解 除了少数家庭极品的 金钱本来就是衡量他们诚意的指标 这个资本社会里 你需要的一切...
    skinnyW阅读 25评论 0 0
  • 孩子八岁,一年级,早期叛逆,几度让我精神崩溃,犹如神经病一样的间歇发作。我还很年轻,早早进入一个病态的程度...
    demoyh阅读 145评论 0 1
  • 提笔了几次,又放下了。总是感觉想写,没啥写的。找不到那种感觉,那种呼之欲出的感觉,可能真的和自己的具体做法有关系吧...
    digman阅读 87评论 2 2
  • 家伙踮起脚,自己可以开关灯了,我知道是在12月16日晚上的时候,不知当时是否给及时记录了
    刘晓琳_6c39阅读 7评论 0 0
  • 焦灼这种情绪,就像燃烧的火焰,任其发展的话,终将烧伤周遭的一切。降降温啊,孩子。 16号之后,一晃快一周,一事无成...
    小哀不哀阅读 35评论 0 0