vue组件学习教程


Posted in Javascript onSeptember 09, 2017

在学习vue时,组件学习比较吃力,尤其是组件间的通信,所以总结一下,官方文档的组件部分。

注册组件

全局组件

语法如下,组件模板需要使用一个根标签包裹起来。data必须是一个方法

Vue.component('component-name',{
  template:'<div><h1>标题</h1><span>作者信息</span></div>',
  data(){
    return{
      message:'组件的属性'
    }
  },
  methods:{

  }
})

局部组件

var com = {
  template:'<div><h1>标题</h1><span>作者信息</span></div>',
  data(){
    return{
      message:'组件的属性'
    }
  },
  methods:{

  }
}

new Vue({
  components:{
    'compontent-name':com
  }
})

组件通信

prop将父组件数据传给子组件

<div id='app'>
   <child :msg=message></child>
 </div>
<script>
  Vue.component('child', {
    props: ['msg'],
    template: '<p>{{msg}}</p>'
  })

  new Vue({
    el: '#app',
    data: {
      message: '父组件数据'
    }
  })
</script>

利用子组件的props选项,父组件可以向子组件传递数据,但是子组件不能求改父组件的数据。

非父子组件通信

需要使用一个空的Vue实例来管理

<div id='app'>
  <com-a></com-a>
  <com-b></com-b>
</div>
var bus = new Vue();

var coma = {
  template: '<p @click="send">{{adata}}</p>',
  data(){
    return {
      adata: 'a的数据'
    }
  },
  methods:{
    send(){
      // 触发这一事件
      bus.$emit('data-to-b', this.adata);
    }
  }
  
};

var comb= {
  template: '<p>{{bdata}}</p>',
  data(){
    return {
      bdata: 'b的数据'
    }
  },
  mounted(){
    // 监听事件,获取a组件的数据,进行相关操作
    bus.$on('data-to-b', function (msg) {
      this.bdata = msg;
    }.bind(this));
  }
};

new Vue({
  el:'#app',
  components: {
    'com-a': coma,
    'com-b': comb
  }
})

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

Javascript 相关文章推荐
js控制input输入字符解析
Dec 27 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
javascript实现微信分享
Dec 23 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 #Javascript
Vue2几种常见开局方式详解
Sep 09 #Javascript
使用JS动态显示文本
Sep 09 #Javascript
深入理解ES7的async/await的用法
Sep 09 #Javascript
jQuery事件对象的属性和方法详解
Sep 09 #jQuery
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 #Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 #Javascript
You might like
PHP添加MySQL数据记录代码
2008/06/07 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
js控制input输入字符解析
2013/12/27 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
js实现数字滚动特效
2019/12/16 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
Python urlopen 使用小示例
2008/09/06 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
房地产项目策划书
2014/02/05 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
化学教育专业自荐信
2014/07/04 职场文书
庆六一宣传标语
2014/10/08 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
淮海战役观后感
2015/06/11 职场文书
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL