vuejs父子组件通信的问题


Posted in Javascript onJanuary 11, 2017

父子组件之间可以通过props进行通信:

组件的定义:

1.创建component类:

var Profile = Vue.extend({

          template: "<div>Lily</div>"; 

        })

 2.注册一个tagnme:

Vue.component("me-profile",Profile);//全局注册

局部注册:

var vm = new Vue({

 el: "#todo",

 components: {

  "my-profile": Profile

 },

 ...

}

模板注意事项:

 因为 Vue 就是原生的DOM,所以有些自定义标签可能不符合DOM标准,比如想在 table 中自定义一个 tr,如果直接插入 my-component 不符合规范,所以应该这样写:

<table>

 <tr is="my-component"></tr>

</table>

在子组件中有一个this.$parent和this.$root可以用来方法父组件和跟实例。(但是不推荐)

Vue中子组件可以通过事件和父组件进行通信。向父组件发消息是通过this.$dispatch,而向子组件发送消息是通过this.$boardcast,这里都是向所有的父组件和子组件发送消息。

子组件:

props: {

       url: {

             type: Array,

             default: function() {

               return []        

             }

          } 

     },

 methods: {

  add: function() {

   this.$dispatch("add", this.input); //这里就是向父组件发送消息

   this.input = "";

  }

 }

父组件:

data() {

     return {

      url:  .....

     } 

   },

 events: {

  add: function(input) {

   if(!input) return false;

   this.list.unshift({

    title: input,

    done: false

   });

  }

 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中xml操作实现代码
Nov 21 Javascript
基于js与flash实现的网站flv视频播放插件代码
Oct 14 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
canvas绘制的直线动画
Jan 23 Javascript
js获取ip和地区
Mar 10 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
Vue——前端生成二维码的示例
Dec 19 Vue.js
bootstrap 表单验证使用方法
Jan 11 #Javascript
原生js实现无缝轮播图效果
Jan 11 #Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 #Javascript
原生js实现放大镜效果
Jan 11 #Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 #Javascript
微信小程序开发经验总结(推荐)
Jan 11 #Javascript
bootstrap手风琴制作方法详解
Jan 11 #Javascript
You might like
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
php中yii框架实例用法
2020/12/22 PHP
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
2015/03/13 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
在Django的URLconf中使用命名组的方法
2015/07/18 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
使用python实现ANN
2017/12/20 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python安装whl文件过程图解
2020/02/18 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
就业推荐表自我鉴定
2013/10/29 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
办理房产证委托书
2014/09/18 职场文书
中学生检讨书1000字
2014/10/28 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
Nginx动静分离配置实现与说明
2022/04/07 Servers