Vue組件全局注冊實現(xiàn)警告框的實例詳解
更新時間：2018年06月11日 09:37:20 作者：ChinneJi
這篇文章主要介紹了Vue組件全局注冊實現(xiàn)警告框的實例,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
外部引入
<link rel="stylesheet"> <link rel="stylesheet"> <script type="text/javascript" src="../js/vue-2.5.16.js"></script>
HTML部分
<div class="container"> <!--動態(tài)數(shù)據綁定--> <my-info v-bind:data='msg' v-on:close='closeHandler'></my-info> <!--靜態(tài)數(shù)據綁定--> <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必須是一個函數(shù)
data(){
return {
isShow:true
}
},
props:['data'],
methods:{
close(){
//子組件向父組件發(fā)射事件
this.$emit('close');
//關閉消息框
this.isShow = false;
}
},
});
new Vue({
el:'.container',
data:{
msg:'添加失敗！'
},
methods:{
closeHandler(){
console.log('關閉了');
}
}
});
</script>
效果
全局組件
組件的創(chuàng)建和注冊分成3步：創(chuàng)建組件構造器，注冊組件，掛載作用域內實例化
例如：
<div id="app">
<!-- 3. #app是Vue實例掛載的元素，應該在掛載元素范圍內使用組件-->
<my-component></my-component>
</div>
<script>
// 1.創(chuàng)建一個組件構造器
var myComponent = Vue.extend({
template: '<div>這是我的全局組件</div>'
})
// 2.注冊組件，并指定組件的標簽，組件的HTML標簽為<my-component>
Vue.component('my-component', myComponent)
new Vue({
el: '#app'
});
</script>
我們來理解組件的創(chuàng)建和注冊：
- Vue.extend()是Vue構造器的擴展，調用Vue.extend()創(chuàng)建的是一個組件構造器，而不是一個具體的組件實例。
- Vue.extend()構造器有一個選項對象，選項對象的template屬性用于定義組件要渲染的HTML。
- 使用Vue.component()注冊組件時，需要提供2個參數(shù)，第1個參數(shù)時組件的標簽，第2個參數(shù)是組件構造器,也就是說
- Vue.component('標簽名',Vue.extend())=>
- Vue.component('標簽名', {template:' '})
- Vue.component()方法內部會調用組件構造器，創(chuàng)建一個組件實例。
全局組件必須寫在Vue實例創(chuàng)建之前，才在該根元素下面生效
例如：
<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向下傳遞數(shù)據給子組件。
Prop靜態(tài)傳遞數(shù)據
<div class="father">
<child msg="hello!" data="yes!"></child>
</div>
Vue.component('child',{
props:['msg',"data"],
template:`<p>{{msg}}</p>
<p>{{data}}</p>
`
})
Prop動態(tài)傳遞數(shù)據
<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組件全局注冊實現(xiàn)警告框的實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
隨著前端技術的發(fā)展,TypeScript 已經成為了許多開發(fā)者的首選語言之一,因為它提供了靜態(tài)類型檢查,可以幫助開發(fā)者在編寫代碼階段就發(fā)現(xiàn)錯誤,本文將詳細介紹如何在 Vue 3 中配置 TypeScript,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了Vue實現(xiàn)購物車實例代碼,需要的朋友可以參考下2020-05-05
本篇文章主要介紹了vue 的keep-alive緩存功能的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
本文主要介紹了vite構建項目并支持微前端，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
Avue自定義formslot調用rules自定義規(guī)則方式
在Avue框架中,使用formslot自定義表格列時可能會遇到無法調用Avue的自定義校驗規(guī)則的問題,這通常發(fā)生在嘗試通過formslot自定義設置列的場景中,解決這一問題的一個有效方法是將自定義列與Avue的校驗規(guī)則通過特定方式連接起來2024-10-10
Slots Emit和Props穿透組件封裝實現(xiàn)摸魚加鐘
這篇文章主要為大家介紹了Slots Emit和Props穿透組件封裝實現(xiàn)示例詳解，為摸魚加個鐘，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了初試vue-cli使用HBuilderx打包app的坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
require是node中的一個方法,他的作用是用于引入模塊、 JSON、或本地靜態(tài)文件,這篇文章主要介紹了vue中的require使用,需要的朋友可以參考下2023-08-08
本篇文章主要介紹了關于vue.js v-bind 的一些理解和思考，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
Vue裝飾器中的vue-property-decorator?和?vux-class使用詳解
這篇文章主要介紹了Vue裝飾器中的vue-property-decorator?和?vux-class使用詳解,通過示例代碼給大家介紹的非常詳細，對vue-property-decorator?和?vux-class的使用感興趣的朋友一起看看吧2022-08-08