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 相关文章推荐
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
jQuery+easyui中的combobox实现下拉框特效
Feb 27 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
Nov 22 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
解析原生JS getComputedStyle
May 25 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
PHP常用函数小技巧
2008/09/11 PHP
php db类库进行数据库操作
2009/03/19 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
php读取远程gzip压缩网页的方法
2014/12/29 PHP
php页面缓存方法小结
2015/01/10 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
jQuery Flash/MP3/Video多媒体插件
2010/01/18 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
jQuery中库的引用方法
2018/01/06 jQuery
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
Python微信公众号开发平台
2018/01/25 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
使用python远程操作linux过程解析
2019/12/04 Python
美国休闲服装品牌:Express
2016/09/24 全球购物
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
行政人事专员岗位职责
2014/03/05 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
Python利用folium实现地图可视化
2021/05/23 Python
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS