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 相关文章推荐
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
Element Input组件分析小结
Oct 11 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
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面向对象全攻略 (十七) 自动加载类
2009/09/30 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
yii2 数据库读写分离配置示例
2017/02/10 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
vue实现文件上传功能
2018/08/13 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
Python中set与frozenset方法和区别详解
2016/05/23 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
用python制作个视频下载器
2021/02/01 Python
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
敬老模范事迹
2014/05/21 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
Vue.Draggable实现交换位置
2022/04/07 Vue.js