ammm学习Vue有好几天了，今天遇到难点所以打算写一点随笔加深印象。

一、首先最简单的创建组件

1全局组件   Vue.component()

  1. Vue.component('hello',{
  2.         template:'<h1>hello world<h1>'
  3.     })

然后就可以调用了，前提：你需要先设置Vue的接管范围

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Hello World</title>
  6.     <script src="Vue.js"></script>
  7. </head>
  8. <body>
  9.     <div id="vm">
  10.         <hello></hello>
  11.     </div>
  12. </body>
  13. <script>
  14.     Vue.component('hello',{
  15.         template:'<h1>hello world<h1>'
  16.     })
  17.  
  18.     new Vue({
  19.         el:'#vm'
  20.     })
  21. </script>
  22. </html>

2.  局部组件

先在外部声明，然后在Vue实例中实例化

  1. var hello={
  2.         template:'<h1>hello world</h1>'
  3.     }
  4.     var app=new Vue({
  5.         el:'#app',
  6.         components:{
  7.             hello:hello       //在此处生成局部组件两个hello可以不同
  8.         }
  9.     })

二、组件传值

1.父组件向子组件传值

最简单的方法通过 <slot></slot>传值

<hello></hello>里面的hiboy会传递到子组件中替代slot

  1. <body>
  2.     <div id="app">
  3.         <hello>hiboy</hello>
  4.     </div>
  5. </body>
  6. <script>
  7.     Vue.component('hello',{
  8.         template:'<h1><slot></slot></h1>'
  9.     })
  10.     var app=new Vue({
  11.         el:'#app'
  12.     })
  13. </script>

常规方法通过props传值

  1. <body>
  2.     <div id="app">
  3.         <hello message="hi boy"></hello>
  4.     </div>
  5. </body>
  6. <script>
  7.     Vue.component('hello',{
  8.         props:['message'],//此处的值和dom里的值对应
  9.         template:'<h1>{{message}}</h1>'//通过插值表达绑定数据
  10.     })
  11.     var app=new Vue({
  12.         el:'#app'
  13.     })
  14. </script>

当然我们可能会遇到像这样的Bug

（当你在一个表格中使用组件时会发现...）

  1. <body>
  2.     <div id="app">
  3.         <table>
  4.             <tbody>
  5.                 <hello></hello>
  6.                 <hello></hello>
  7.             </tbody>
  8.         </table>
  9.     </div>
  10. </body>
  11. <script>
  12.     Vue.component('hello',{
  13.         template:'<tr>Hi boy</tr>'//通过插值表达绑定数据
  14.     })
  15.     var app=new Vue({
  16.         el:'#app'
  17.     })
  18. </script>

我们想要在表格的tbody中插入两个组件，组件为tr但是仔细看一下运行后的Dom

我们会发现插入的两个组件并没有在我们预想的tbody中（疑惑...）

解决方法：采用 is 声明

  1. <body>
  2.     <div id="app">
  3.         <table>
  4.             <tbody>
  5.                 <tr is="hello"></tr>//采用is把tr转化为hell组件
  6.                 <hello></hello>
  7.             </tbody>
  8.         </table>
  9.     </div>
  10. </body>
  11. <script>
  12.     Vue.component('hello',{
  13.         template:'<tr>Hi boy</tr>'//通过插值表达绑定数据
  14.     })
  15.     var app=new Vue({
  16.         el:'#app'
  17.     })
  18. </script>

看一下运行结果吧！

类似于以上情况的标签有 table、select、ul、ol

2.子组件向父组件传值

子组件向父组件传值主要通过向上层传递事件实现所需函数$emit(’事件名‘，值)//值可为空也可多个

  1. <body>
  2.     <div id="app">
  3.         <hello @addnum="handleAddClick"></hello><!-- 接收子节点传过来的值 -->
  4.         <h3>{{num}}</h3>
  5.     </div>
  6. </body>
  7. <script>
  8.     Vue.component('hello',{
  9.         data:function(){                              //组件的data为一个函数
  10.             return{
  11.                 number:0
  12.             }
  13.         },
  14.         template:'<p @click="handleClick">{{number}}</p>',//number为data返回的值
  15.         methods:{
  16.             handleClick:function(){
  17.                 //这里点击一次我们让自身加一
  18.                 this.number++;
  19.                 //向上传递事件给父节点
  20.                 this.$emit('addnum',1);//第一个参数为事件名，第二个为所需要传的值，这里我们传1，当然可以传多个值
  21.             }
  22.         }
  23.     })
  24.     var app=new Vue({
  25.         el:'#app',
  26.         data:{
  27.             num:0
  28.         },
  29.         methods:{
  30.             handleAddClick:function(step){
  31.                 this.num+=step;
  32.             }
  33.         }
  34.     })
  35. </script>

注意：组件的data是一个函数通过返回值来实现

接下来我们通过两个子组件的值计算出父组件的值。此时我们会引入一个新的东西 ref 它可以让我们获取所需dom

  1. <body>
  2.     <div id="app">
  3.         <hello @addnum="handleAddClick" ref="one"></hello><!-- 接收子节点传过来的值 -->
  4.         <hello @addnum="handleAddClick" ref="two"></hello>
  5.         <h3>{{num}}</h3>
  6.     </div>
  7. </body>
  8. <script>
  9.     Vue.component('hello',{
  10.         data:function(){                              //组件的data为一个函数
  11.             return{
  12.                 number:0
  13.             }
  14.         },
  15.         template:'<p @click="handleClick">{{number}}</p>',//number为data返回的值
  16.         methods:{
  17.             handleClick:function(){
  18.                 //这里点击一次我们让自身加一
  19.                 this.number++;
  20.                 //向上传递事件给父节点
  21.                 this.$emit('addnum');
  22.             }
  23.         }
  24.     })
  25.     var app=new Vue({
  26.         el:'#app',
  27.         data:{
  28.             num:0
  29.         },
  30.         methods:{
  31.             handleAddClick:function(){
  32.                 this.num=this.$refs.one.number+this.$refs.two.number;
  33.             }
  34.         }
  35.     })
  36. </script>

通过this.$refs.one我们可以获得ref="one"的组件以及其内的所以内容，

this.$refs.one.number获取了组件中的number

Ok就是这样，至于最基础的模板语法就自己看官方文档吧。

组件基础—Vue学习笔记的更多相关文章

  1. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  2. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  3. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  4. Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级

    (四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...

  5. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  6. Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

    一  使用环境: windows 7 64位操作系统 二  IDE:VSCode/PyCharm 三  Vue.js官网: https://cn.vuejs.org/ 四  下载安装引用 方式1:直接 ...

  7. Vue学习笔记-Django REST framework3后端接口API学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  8. Vue学习笔记-vue-element-admin 前端学习

    一  使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7  (Windows x86- ...

  9. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

随机推荐

  1. 孤立森林（isolation forest）

    1.简介 孤立森林(Isolation Forest)是另外一种高效的异常检测算法,它和随机森林类似,但每次选择划分属性和划分点(值)时都是随机的,而不是根据信息增益或者基尼指数来选择. 在建树过程中 ...

  2. centos6.5 redis 安装配置及java调用

    1.安装gcc 执行命令  yum install gcc 2. 安装ruby环境 yum install ruby yum install rubygems gem install redis 下载 ...

  3. org.apache.hadoop.ipc.RemoteException: java.io.IOException:XXXXXXXXXXX could only be replicated to 0 nodes, instead of 1

    原因:Configured Capacity也就是datanode 没用分配容量 [root@dev9106 bin]# ./hadoop dfsadmin -report Configured Ca ...

  4. android textview settext卡顿深层次原因

    最近在公司项目里面发现listview里面的textview在调用settext函数的时候非常耗时,当时都有点不敢相信,这是因为如果你把textview设置成wrap_content,则每次调用set ...

  5. eclipse怎样检出SVN项目

    首先确定你的eclipse安装了svn插件.查看eclipse是否安装插件的方法:打开eclipse->文件->新建->其他 ,在弹出的选择向导窗口中如果能搜索到svn,说明ecli ...

  6. [转载红鱼儿]Delphi XE7 update1进步太大了

    写以下的文字是怀着无比兴奋的心情写的,急于同朋友们分享XE7的进步! 1.更新的bug列表并不全 通过bug修正列表及发布的消息,可以看到up1修正了很多bug,正如我所说,有些bug并没有写到发布的 ...

  7. java.lang.String cannot be cast to java.util.Date

    我这个是个新建的功能,然后在保存的时候出现了这个错误.然后就找到了新建的action,发现其上的list方法出了问题. 这样是正确的.之前list<Constract>写成这样了.

  8. Stacktraces java.lang.NoSuchMethodException: com.liuyang.action.UserAction.add()

    Struts Problem Report Struts has detected an unhandled exception: Messages: com.liuyang.action.UserA ...

  9. 51Nod 1376 最长递增子序列的数量 (DP+BIT)

    题意:略. 析:dp[i] 表示以第 i 个数结尾的LIS的长度和数量,状态方程很好转移,先说长度 dp[i] = max { dp[j] + 1 | a[i] > a[j] && ...

  10. 基于zookeeper的主备切换方法

    继承CZookeeperHelper即可快速实现主备切换: https://github.com/eyjian/libmooon/blob/master/include/mooon/net/zooke ...