Vue组件之全局组件与局部组件的使用详解


Posted in Javascript onOctober 09, 2017

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以is特性扩展。个人认为就是一个可以重复利用的结构层代码片段。

全局组件注册方式:Vue.component(组件名,{方法})

eg:

<body>
<div id="app">
<my-component></my-component>
</div>
<div id="app1">
  <my-component></my-component>

</div>
<script>
Vue.component("my-component",{
  template:"<h1>我是全局组件</h1>"
});
new Vue({
  el:"#app"
});
new Vue({
  el:"#app1"
})
</script>
</body>

渲染结果:

<div id="app">
  <h1>我是全局组件</h1>
</div>
<div id="app1">
  <h1>我是全局组件</h1>
</div>

这里需要注意:

1.全局组件必须写在Vue实例创建之前,才在该根元素下面生效;

eg:

<body>
<div id="app">
  <my-component></my-component>
</div>
<div id="app1">
  <my-component></my-component>

</div>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局组件</h1>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>

这样只会渲染app1根元素下面的,并不会渲染app根元素下面的,并且会报错。

2.模板里面第一级只能有一个标签,不能并行;

<body>
<div id="app">
  <my-component></my-component>
</div>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局组件</h1>" +
    "<p>我是全局组件内标签</p>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>

这样子会报错,并且只会渲染第一个标签h1;我们应该这样子写:

<body>
<div id="app">
  <my-component></my-component>
</div>
<script>
  new Vue({
    el: "#app"
  });
  Vue.component("my-component", {
    template: "<h1>我是全局组件<p>" +
    "我是全局组件内标签</p></h1>"
  });
  new Vue({
    el: "#app1"
  })
</script>
</body>

局部组件注册方式,直接在Vue实例里面注册

eg:

<body>
<div id="app1">
  <child-component></child-component>
</div>
<script>
  new Vue({
    el: "#app1",
    components:{
      "child-component":{
        template:"<h1>我是局部组件</h1>"
      }
    }
  });
</script>

局部组件需要注意:

1.属性名为components,s千万别忘了;

2.套路比较深,所以建议模板定义在一个全局变量里,代码看起来容易一点,如下:(模板标签比较多的时候,这样子写更加简洁规整)

<body>
<div id="app1">
  <child-component></child-component>
</div>
<script>
  var child={
    template:"<h1>我是局部组件</h1>"
  };
  new Vue({
    el: "#app1",
    components:{
      "child-component":child
    }
  });
</script>
</body>

关于组件中的其他属性,可以和实例中的一样,但是data属性必须是一个函数:

eg:

<body>
<div id="app1">
  <child-component></child-component>
</div>
<script>
  var child={
    template:"<button @click='add2'>我是局部组件:{{m2}}</button>",
    data:function(){
      return {m2:1}
    },
    methods:{
      add2:function(){
        this.m2++
      }
    }
  };
  new Vue({
    el: "#app1",
    components:{
      "child-component":child
    }
  })
</script>
</body>

显示结果:

Vue组件之全局组件与局部组件的使用详解

全局组件和局部组件一样,data也必须是一个函数:

<body>
<div id="app1">
  <my-component></my-component>
</div>
<script>
  Vue.component("my-component",{
    template:"<button @click='add1'>全局组件:{{m1}}</button>",
    data:function(){
      return {
        m1:10
      }
    },
    methods:{
      add1:function(){
        this.m1++
      }
    }
  });
  new Vue({
    el:"#app1"
  })
</script>
</body>

显示结果:

Vue组件之全局组件与局部组件的使用详解

当使用 DOM 作为模板时 (例如,将el选项挂载到一个已存在的元素上),你会受到 HTML 的一些限制,因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模板内容。尤其像这些元素<ul><ol><table><select>限制了能被它包裹的元素,而一些像<option>这样的元素只能出现在某些其它元素内部。

自定义组件<my-row>被认为是无效的内容,因此在渲染的时候会导致错误。变通的方案是使用特殊的is属性:

eg:

<body>
<div id="app1">
<ul>
  <li is="my-component"></li>
</ul>
</div>
<script>
 Vue.component("my-component",{
   template:"<h1>{{message}}</h1>",
   data:function(){
     return {
       message:"hello world"
     }
   }
 });
 new Vue({
   el:"#app1"
 })
</script>
</body>

渲染结果为:

Vue组件之全局组件与局部组件的使用详解

对于全局与局部的作用域问题,我们可以这样理解,只要变量是在组件内部用的,这些变量必须是组件内部的,而在外部html结构中引用的变量,都引用的是该挂载下的实例里面的变量

eg:

<body>
<div id="app1">
<my-component></my-component>
</div>
<script>
 Vue.component("my-component",{
   template:"<button @click='add3'>" +
   "{{message}}</button>",
   data:function(){
     return {
       message:"hello world"
     }
   },
   methods:{
     add3:function(){
       alert("我是局部")
     }
   }
 });
 new Vue({
   el:"#app1",
   methods:{
     add3:function(){
       alert("我是全局")
     }
   }
 })
</script>
</body>

弹出框显示:我是局部

Vue中所谓的全局指的是该挂载下的区域;

下面这种做法是错误的,按我的想法觉得应该会弹出:我是全局,但是却报错,也就是说组件处于全局下不可以添加默认事件,要用全局的事件函数,必须父子通信

<body>
<div id="app1">
<my-component @click="add3"></my-component>
</div>
<script>
 Vue.component("my-component",{
   template:"<button @click='add3'>" +
   "{{message}}</button>",
   data:function(){
     return {
       message:"hello world"
     }
   }
 });
 new Vue({
   el:"#app1",
   methods:{
     add3:function(){
       alert("我是全局")
     }
   }
 })
</script>
</body>

额外话题:

1.函数return后面必须跟返回的内容,不能换行写

eg:

Vue组件之全局组件与局部组件的使用详解

下面这种写法不会返值回来:

Vue组件之全局组件与局部组件的使用详解

2.Vue和小程序等一样,采用es6的函数写法,this指向是不一样的

<body>
<div id="app1">
  <button @click="f">ES5</button>
  <button @click="f1">ES6</button>
</div>
<script>
new Vue({
  el:"#app1",
  methods:{
    f:function(){
     console.log(this)
    },
    f1:()=>{
      console.log(this)
    }
  }
})
</script>
</body>

结果:

第一个this指的是Vue实例

第二个this指的是Window

Vue组件之全局组件与局部组件的使用详解

由于它和小程序不一样,我发现在data里面this指的是window,在methods里面this才是Vue实例

所以建议大家用es5写吧

new Vue({
  el:"#app1",
  data:{that:this},
})

Vue组件之全局组件与局部组件的使用详解

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

Javascript 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
jQuery插件之validation插件
Mar 29 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
JS装饰器函数用法总结
Apr 21 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 #Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 #Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 #Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 #Javascript
JS中Attr的用法详解
Oct 09 #Javascript
移动端效果之Swiper详解
Oct 09 #Javascript
浅谈node的事件机制
Oct 09 #Javascript
You might like
php中文字符截取防乱码
2008/03/28 PHP
php str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
javascript中的对象创建 实例附注释
2011/02/08 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
详解 Python 与文件对象共事的实例
2017/09/11 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
django celery redis使用具体实践
2019/04/08 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
python实现密码强度校验
2020/03/18 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
计算机专业自荐信
2013/10/14 职场文书
应届生自我鉴定
2013/12/11 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
2016新年晚会开场白
2015/12/03 职场文书
辞职申请书范本
2019/05/20 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
MySQL插入数据与查询数据
2022/03/25 MySQL