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 相关文章推荐
jquery实现聚光灯效果的方法
Feb 06 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
微信小程序实现单选功能
Oct 30 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
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
德劲1103二次变频版的打磨
2021/03/02 无线电
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
javascript 面向对象编程基础 多态
2009/08/21 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
2015/06/19 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
React中的render何时执行过程
2018/04/13 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
儿童编程python入门
2018/05/08 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
tensorflow更改变量的值实例
2018/07/30 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
自我评价中英文语句
2013/11/30 职场文书
《去年的树》教学反思
2014/04/11 职场文书
好媳妇事迹材料
2014/12/24 职场文书
生产实习心得体会范文
2016/01/22 职场文书
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle