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 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
用js编写留言板
Mar 17 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 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
如何开发一个虚拟域名系统
2006/10/09 PHP
PHP eval函数使用介绍
2013/12/08 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
php实现三级级联下拉框
2016/04/17 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
vue实现的树形结构加多选框示例
2019/02/02 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
vue实现简单学生信息管理
2020/05/30 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
Python中字典的基本知识初步介绍
2015/05/21 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
Booking.com美国:全球酒店预订网站
2017/04/18 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
四年级语文教学反思
2014/02/05 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
世界读书日的活动方案
2014/08/20 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
感恩教师主题班会
2015/08/12 职场文书