时间:2021-05-26
外部引入
<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>效果
全局组件
组件的创建和注册分成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>我们来理解组件的创建和注册:
全局组件必须写在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组件全局注册实现警告框的实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
1、全局注册(这种方式注册组件必须在vue实例化之前声明)Vue.component('tag-name',{})2、局部注册varChild={templat
Vue中的组件和指令分为局部组件、局部指令和全局组件、全局指令。对于注册有一定数量的全局指令和全局组件时,官方文档中的方法就显得有些不够清爽了。全局组件在Vue
本文实例讲述了Vue组件注册。分享给大家供大家参考,具体如下:1组件名在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了:Vue
全局注册,注册的组件需要在初始化根实例之前注册了组件;局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用:全局组件jsVue.c
本文实例讲述了AngularJS全局警告框实现方法。分享给大家供大家参考,具体如下:varmyapp=angular.module('myapp',['ngAn