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 相关文章推荐
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
js跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 Javascript
js在HTML的三种引用方式详解
Aug 29 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调用数据库的存贮过程!
2006/10/09 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
实现高性能javascript的注意事项
2019/05/27 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
python爬取个性签名的方法
2018/06/17 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
世界上最大的二手相机店:KEN
2017/05/17 全球购物
智能旅行箱:Horizn Studios
2018/04/30 全球购物
劳动实践课感言
2014/02/01 职场文书
初中班主任评语大全
2014/04/24 职场文书
店铺转让协议书
2014/12/02 职场文书
党员自我评价2015
2015/03/03 职场文书
责任书范本大全
2015/05/11 职场文书