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开发者都需要知道的5个小技巧
Jan 08 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
Nov 15 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 Javascript
详解 javascript对象创建模式
Oct 30 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 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
php中Smarty模板初体验
2011/08/08 PHP
PHP eval函数使用介绍
2013/12/08 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
python使用udp实现聊天器功能
2018/12/10 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
python selenium 获取接口数据的实现
2020/12/07 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
高中数学教师求职信
2013/10/30 职场文书
道德模范先进事迹
2014/02/14 职场文书
小学优秀班集体申报材料
2014/05/25 职场文书
老乡聚会通知
2015/04/23 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
Go获取两个时区的时间差
2022/04/20 Golang