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学习笔录 简单的JQuery
Apr 09 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
小程序实现单选多选功能
Nov 04 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同时支持GIF、png、JPEG
2006/10/09 PHP
php的access操作类
2008/04/09 PHP
深入php数据采集的详解
2013/06/02 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
完善的jquery处理机制
2016/02/21 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python中自定义函数的教程
2015/04/27 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Python3计算三角形的面积代码
2017/12/18 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Python3进制之间的转换代码实例
2019/08/24 Python
python对execl 处理操作代码
2020/06/22 Python
python实现按日期归档文件
2021/01/30 Python
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
预备党员公开承诺书
2014/05/28 职场文书
体育运动口号
2014/06/09 职场文书
师范生求职自荐信
2014/06/14 职场文书
优秀教师先进材料
2014/12/16 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
我的收音机情缘
2022/04/05 无线电