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 相关文章推荐
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
JS中递归函数
Jun 17 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
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将向Java靠拢
2006/10/09 PHP
php的access操作类
2008/04/09 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
用Python制作音乐海报
2021/01/26 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
医学类导师推荐信范文
2013/11/19 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
应届生面试求职信
2014/07/02 职场文书
会员活动策划方案
2014/08/19 职场文书
实习指导教师评语
2014/12/30 职场文书
共青团员自我评价
2015/03/10 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
厉行节约工作总结
2015/08/12 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL