基於Vue全域性元件與區域性元件的區別說明
阿新 • • 發佈：2020-08-12
1、元件宣告
<!-- 全域性元件模板father模板 -->
<template id="father">
<div>
<h3>這是{{name}}</h1>
<div>
<p>這是{{data}}</p>
</div>
</div>
</template>
var FATHER = {
template: "#father",data: function() {
return {
name: "一個全域性元件-模板-",data: "資料：18892087118"
}
}
};2、元件註冊
Vue.component('father',FATHER);
3、元件掛載
<h5>全域性元件1</h5>
<father></father>
4、元件例項
<!DOCTYPE html>
<html>
<head>
<title>vue2.0 --- 區域性元件與全域性元件</title>
</head>
<body>
<h3>vue2.0區域性元件與全域性元件</h3>
<div id='app'>
<h5>區域性元件</h5>
<fatherlocal></fatherlocal>
<hr>
<h5>全域性元件1</h5>
<father></father>
<hr>
<h5>全域性元件2</h5>
<child :fromfather='giveData'></child>
</div>
<!-- 區域性元件模板fatherlocal -->
<template id="father-local">
<div>
<h3>這是{{name}}</h1>
<div>
<p>這是{{data}}</p>
</div>
</div>
</template>
<!-- 全域性元件模板father -->
<template id="father">
<div>
<h3>這是{{name}}</h1>
<div>
<p>這是{{data}}</p>
</div>
</div>
</template>
<template id="child">
<div>
<h3>這是{{name}}</h3>
<div>
<p>{{cmsgtwo}}</p>
<p>{{cmsg}}</p>
<p>{{fromfather}}</p>
<p>{{fromfather.fmsg}}</p>
<p><input type="button" value="按鈕" @click=" "></p>
</div>
</div>
</template>
<script src="vue_2.2.2_vue.min.js"></script>
<script type="text/javascript">
// 定義元件
var FATHER = {
template: "#father",data: function() {
return {
name: "一個全域性元件-模板-",data: "資料：18892087118"
}
}
};
var CHILD = {
template: "#child",data: function() {
return {
name: "子元件",cmsg: "子元件裡的第一個資料",cmsgtwo: "子元件裡的第二個資料"
}
},methods: {
change: function() {
this.fromfather.fmsg = "子元件資料被更改了"
}
},mounted: function() {
this.cmsg = this.fromfather;
},props: ["fromfather"],};
// 註冊元件
Vue.component('father',FATHER);
Vue.component("child",CHILD);
var vm = new Vue({
data: {
fmsg: "data裡的資料",giveData: {
fmsg: "這是父元件裡的資料"
}
},methods: {},// 區域性元件fatherlocal
components: {
'fatherlocal': {
template: '#father-local',data: function() {
return {
name: "區域性-父元件",data: "區域性-父元件裡的資料"
}
}
}
}
}).$mount('#app');
</script>
</body>
</html>6、特殊的屬性is
當使用 DOM 作為模板時 (例如，將el選項掛載到一個已存在的元素上)，你會受到 HTML 的一些限制，因為 Vue 只有在瀏覽器解析和標準化 HTML 後才能獲取模板內容。尤其像這些元素<ul>，<ol>，<table>，<select>限制了能被它包裹的元素，而一些像<option>這樣的元素只能出現在某些其它元素內部。
自定義元件<my-row>被認為是無效的內容，因此在渲染的時候會導致錯誤。變通的方案是使用特殊的is屬性：
<body>
<div id="app1">
<ul>
<li is="my-component"></li>
</ul>
</div>
<script>
Vue.component("my-component",{
template:"<h1>{{message}}</h1>",data:function(){
return {
message:"hello world"
}
}
});
new Vue({
el:"#app1"
})
</script>
</body>補充知識：Vue元件之入門：全域性元件三種定義
不論我們使用哪種方式創建出來的元件，元件中的template屬性指向的模板內容中，必須有且只有一個根元素，其他元素必須在這個根元素下面。
1.使用Vue.extend配合Vue.component定義全域性元件
在使用Vue.extend配合Vue.component定義全域性元件時，Vue.extend裡面定義template模板，而Vue.component裡面是要註冊一個元件。
<body>
<div id="app">
<!--第三步頁面中使用 -->
<!-- 如果要使用元件，直接把元件的名稱以HTML標籤的形式引入到頁面中-->
<my-compnent></my-compnent>
</div>
<script>
//第一步：使用Vue.extend來建立全域性元件
var com1 = Vue.extend({
//通過template模板的屬性來展示元件要顯示的html
template: '<h2>使用Vue.extend建立全域性元件</h2>'
});
//第二步：使用 Vue.component('元件名稱',創建出來的元件模板物件)
Vue.component('myCompnent',com1);
// 建立 Vue 例項，得到 ViewModel
var vm = new Vue({
el: '#app',data: {},methods: {}
});
</script>
</body>
【注意】在定義註冊元件時，元件的名稱不需要按照駝峰命名，但是在頁面引入元件時，元件的名稱必須按照駝峰命名。
簡寫如下：
2.直接使用Vue.component定義全域性元件
這裡是直接使用Vue.component直接建立一個元件
<div id="app">
<my-com2></my-com2>
</div>
<script>
Vue.component('myCom2',{
template: '<h2>直接使用Vue.component建立元件</h2>'
});
// 建立 Vue 例項，得到 ViewModel
var vm = new Vue({
el: '#app',methods: {}
});
</script>
3.Vue外部直接定義template
<body>
<div id="app">
<my-com3></my-com3>
</div>
<template id="tmp1">
<div>
<h2>這是通過template元素，在外部定義元件的結構，有程式碼的提示和高亮</h2>
</div>
</template>
<script>
Vue.component('myCom3',{
template: "#tmp1"
});
var vm = new Vue({
el: '#app',methods: {}
});
</script>
</body>
以上這篇基於Vue全域性元件與區域性元件的區別說明就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。