这篇文章主要为大家详细介绍了Vue组件全局注册实现警告框的实例分析,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
代码如下:
<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>
代码如下:
<div class="container">
<!--动态数据绑定-->
<my-info v-bind:data='msg' v-on:close='closeHandler'></my-info>
<!--静态数据绑定-->
<my-info data="操作有误"></my-info>
</div>
代码如下:
<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>
组件实例的作用域是孤立的,父组件可以通过props向下传递数据给子组件。
代码如下:
<div class="father">
<child msg="hello!" data="yes!"></child>
</div>
Vue.component('child',{
props:['msg',"data"],
template:`<p>{{msg}}</p>
<p>{{data}}</p>
`
})
代码如下:
<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组件全局注册实现警告框的实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对四海网网站的支持!
本文来自:http://www.q1010.com/184/5407-0.html
注:关于Vue组件全局注册实现警告框的实例分析的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。