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兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
下拉框select的绑定示例
Sep 04 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
微信小程序新手教程之启动页的重要性
Mar 03 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 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运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
python绘图方法实例入门
2015/05/19 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
Python切片索引用法示例
2018/05/15 Python
python实现雨滴下落到地面效果
2018/06/21 Python
python3 flask实现文件上传功能
2020/03/20 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
三好学生自我鉴定
2013/12/17 职场文书
捐书寄语赠言
2014/01/18 职场文书
银行类自荐信
2014/02/04 职场文书
驾驶员安全责任书
2014/07/22 职场文书
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android
一文搞懂Java中的注解和反射
2022/06/21 Java/Android