• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > vuejs父子组件通信的问题

vuejs父子组件通信的问题

作者:lhy031 字体:[增加 减小] 来源:互联网 时间:2017-05-11

lhy031通过本文主要向大家介绍了vuejs父子组件,vuejs 组件,vuejs 组件库,vuejs,vuejs官网等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

组件的定义:

1.创建component类:

var Profile = Vue.extend({

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

        }) 

</div>

 2.注册一个tagnme:

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

局部注册:

var vm = new Vue({

 el: "#todo",

 components: {

  "my-profile": Profile

 },

 ...

} 
</div>

模板注意事项:

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

<table>

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

</table> 
</div>

在子组件中有一个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 = "";

  }

 }  

</div>

父组件:

data() {

     return {

      url:  .....

     } 

   },

 events: {

  add: function(input) {

   if(!input) return false;

   this.list.unshift({

    title: input,

    done: false

   });

  }

 } 

</div>

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
  • vuejs父子组件通信的问题

相关文章

  • 2017-05-11微信小程序 下拉菜单的实现
  • 2017-05-11详解nodejs express下使用redis管理session
  • 2017-05-11js转换对象为xml
  • 2017-05-11AngularJS学习第二篇 AngularJS依赖注入
  • 2017-05-11谈谈JavaScript数组常用方法总结
  • 2017-05-11js实现按座位号抽奖
  • 2017-05-11浅析Angular2子模块以及异步加载
  • 2017-08-26Javascript map如何实现
  • 2017-05-11jqGrid翻页时数据选中丢失问题的解决办法
  • 2017-05-11js实现自动轮换选项卡

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 利用nodejs监控文件变化并使用sftp上传到服务器
    • 关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
    • JS及JQuery对Html内容编码,Html转义
    • 完美的js图片轮换效果
    • 原生JS实现圣旨卷轴展开效果
    • jQuery插件ajaxFileUpload使用详解
    • javascript获取以及设置光标位置
    • 微信小程序组件 contact-button(客服会话按钮)详解及实例代码
    • JavaScript和JQuery获取DIV值的方法示例
    • webpack2.0搭建前端项目的教程详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有