Vue组件全局注册实现警告框的实例详解


Posted in Javascript onJune 11, 2018

外部引入

<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="../js/vue-2.5.16.js"></script>

HTML部分

<div class="container">
   <!--动态数据绑定-->
   <my-info v-bind:data='msg' v-on:close='closeHandler'></my-info>
   <!--静态数据绑定-->
   <my-info data="操作有误"></my-info>
 </div>

script部分

<script type="text/javascript">
   Vue.component('my-info',{
   template:`
     <transition leave-active-class="animated fadeOutUpBig">
     <div
       v-show='isShow' 
       style="background:orange;
          color:#fff;
          padding:.5em 1em; 
          border-radius:5px; 
          margin:.5em 0; 
          position:relative">
       <i class="fa fa-info-circle"></i>
       <span>{{data}}</span>
       <i @click='close' class="fa fa-close" 
        style="position:absolute; 
           right: 1em;
           cursor:pointer"></i>
     </div>
     </transition>
     `,
     //注意:data必须是一个函数
     data(){
       return {
       isShow:true
       }
     },
     props:['data'],
     methods:{
       close(){
       //子组件向父组件发射事件
       this.$emit('close');
       //关闭消息框
       this.isShow = false;
       }
     },
   });
   new Vue({
     el:'.container',
     data:{
       msg:'添加失败!'
     },
     methods:{
       closeHandler(){
       console.log('关闭了');
       }
    }
  });
 </script>

效果

Vue组件全局注册实现警告框的实例详解

全局组件

组件的创建和注册分成3步:创建组件构造器,注册组件,挂载作用域内实例化

例如:

<div id="app">
  <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件-->
  <my-component></my-component>
</div>
<script>
  // 1.创建一个组件构造器
  var myComponent = Vue.extend({
    template: '<div>这是我的全局组件</div>'
  })
  
  // 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component>
  Vue.component('my-component', myComponent)
  
  new Vue({
    el: '#app'
  });
</script>

我们来理解组件的创建和注册:

  1. Vue.extend()是Vue构造器的扩展,调用Vue.extend()创建的是一个组件构造器,而不是一个具体的组件实例。
  2. Vue.extend()构造器有一个选项对象,选项对象的template属性用于定义组件要渲染的HTML。
  3. 使用Vue.component()注册组件时,需要提供2个参数,第1个参数时组件的标签,第2个参数是组件构造器,也就是说
  4. Vue.component('标签名',Vue.extend())=>
  5. Vue.component('标签名', {template:' '})
  6. Vue.component()方法内部会调用组件构造器,创建一个组件实例。

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

例如:

<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>

Prop传值

组件实例的作用域是孤立的,父组件可以通过props向下传递数据给子组件。

Prop静态传递数据

<div class="father"> 
  <child msg="hello!" data="yes!"></child> 
</div> 
Vue.component('child',{
  props:['msg',"data"],
  template:`<p>{{msg}}</p>
       <p>{{data}}</p>
       `
})

Prop动态传递数据

<div class="father"> 
  <child v-bind:msg="val"></child> 
</div> 
Vue.component('child',{
  props:["msg"],
  template:` <p>{{msg}}</p>`
})
new Vue({
  el:'.father,
  data:{
     val:'添加失败!'
  }
})

总结

以上所述是小编给大家介绍的Vue组件全局注册实现警告框的实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
Javascript 面向对象编程(一) 封装
Aug 28 Javascript
判断在css加载完毕后执行后续代码示例
Sep 03 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
深入理解JS中的Function.prototype.bind()方法
Oct 11 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
vue flex 布局实现div均分自动换行的示例代码
Aug 05 Javascript
js实现验证码干扰(静态)
Feb 22 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 #jQuery
Node.js中的cluster模块深入解读
Jun 11 #Javascript
详解vue-router 初始化时做了什么
Jun 11 #Javascript
node中间层实现文件上传功能
Jun 11 #Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 #Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 #Javascript
实例详解Node.js 函数
Jun 10 #Javascript
You might like
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
PHP图片加水印实现方法
2016/05/06 PHP
php PDO异常处理详解
2016/11/20 PHP
浅谈php调用python文件
2019/03/29 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
JavaScript 变量作用域分析
2011/07/04 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
详解flask入门模板引擎
2018/07/18 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
python os模块简单应用示例
2019/05/23 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
python的setattr函数实例用法
2020/12/16 Python
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
销售总监工作职责
2013/11/21 职场文书
嘉宾邀请函
2015/01/31 职场文书
圣诞晚会主持词
2015/07/01 职场文书
会议室管理制度范本
2015/08/06 职场文书
党性修养心得体会2016
2016/01/21 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
Python装饰器详细介绍
2022/03/25 Python