溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Vue中全局組件與局部組件有什么不同？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
1、組件聲明
<!-- 全局組件模板father模板 -->
<template id="father">
<div>
<h4>這是{{name}}</h2>
<div>
<p>這是{{data}}</p>
</div>
</div>
</template>
var FATHER = {
template: "#father",
data: function() {
return {
name: "一個全局組件-模板-",
data: "數據：18892087118"
}
}
};2、組件注冊
Vue.component('father', FATHER);3、組件掛載
<h6>全局組件1</h6> <father></father>
4、組件實例
<!DOCTYPE html>
<html>
<head>
<title>vue2.0 --- 局部組件與全局組件</title>
</head>
<body>
<h4>vue2.0局部組件與全局組件</h4>
<div id='app'>
<h6>局部組件</h6>
<fatherlocal></fatherlocal>
<hr>
<h6>全局組件1</h6>
<father></father>
<hr>
<h6>全局組件2</h6>
<child :fromfather='giveData'></child>
</div>
<!-- 局部組件模板fatherlocal -->
<template id="father-local">
<div>
<h4>這是{{name}}</h2>
<div>
<p>這是{{data}}</p>
</div>
</div>
</template>
<!-- 全局組件模板father -->
<template id="father">
<div>
<h4>這是{{name}}</h2>
<div>
<p>這是{{data}}</p>
</div>
</div>
</template>
<template id="child">
<div>
<h4>這是{{name}}</h4>
<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:"<h2>{{message}}</h2>",
data:function(){
return {
message:"hello world"
}
}
});
new Vue({
el:"#app1"
})
</script>
</body>看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
