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 相关文章推荐
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
Sep 26 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
ant design 日期格式化的实现
Oct 27 Javascript
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 SQL之where语句生成器
2009/03/24 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
PHP7 其他修改
2021/03/09 PHP
jquery动画1.加载指示器
2012/08/24 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
2017/09/05 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
pycham查看程序执行的时间方法
2018/11/29 Python
详解Python time库的使用
2019/10/10 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
秋季运动会广播稿大全
2014/02/17 职场文书
运动会入场口号
2014/06/07 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang