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的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
如何用vue实现网页截图你知道吗
Nov 17 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
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
Python实现程序的单一实例用法分析
2015/06/03 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
python中的colorlog库使用详解
2019/07/05 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
python打开音乐文件的实例方法
2020/07/21 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
高中运动会广播稿
2014/01/21 职场文书
入党自我鉴定
2014/03/25 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
个人租房协议书样本
2014/10/01 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
道歉信怎么写
2015/05/12 职场文书
交通安全学习心得体会
2016/01/18 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
Python实现双向链表基本操作
2022/05/25 Python