vue全局組件和局部組件的寫法介紹

更新時間：2022年03月29日 09:08:38 作者：ywltoread

這篇文章主要介紹了vue全局組件和局部組件的寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

全局組件和局部組件寫法

vue組件有兩種，一種是全局組件，一種是局部組件。整個項目經(jīng)常用到的用全局寫法，用到比較少的專供特定頁面用的使用局部組件。

全局組件引入寫法

在項目的main.js中：

import Vue from 'vue';
import MyComponent from '@/components/MyComponent.vue'; // 導(dǎo)入自己寫的組件文件
?
Vue.use(MyComponent); // 自定義全局組件的時候需要Vue.use();
Vue.component('my-component', MyComponent); //初始化組件
?
new Vue({
? el: '#app',
? router,
? components: {
? ? App,
? ? MyComponent
? },
? template: '<App/>',
});?

局部組件引入寫法

在需要使用組件的a.vue文件中：

<template>
</template>
?
<script>
import MyComponent from '@/components/MyComponent.vue';
export default {
? components: {MyComponent}, // 直接初始化就可以啦，不需要Vue.use();
? data() {},
? methods: {}
};
</script>
?
<style lang="scss" scoped>
</style>?

下面附上自定義組件的MyComponent.vue文件代碼：

<template>
? <div>
? ? <a @click="methods1()"></a>
? </div>
</template>
<script>
import { MessageBox } from 'mint-ui';
export default {
? data () { // 組件內(nèi)參數(shù)定義在data中
? ? return {
? ? ? data1: {}
? ? };
? },
? props: { // 組件傳參使用props
? ? value1: String,
? ? value2: Number
? },
? methods: { // 組件的計算方法
? ? methods1 () {
? ? }
? }
};
</script>
<style lang="scss" scoped>
</style>

vue全局/局部組件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		
		<!-- 全局組件簡寫-->
	    <div id="example1">
			<my-compoent></my-compoent>
		</div>
		<script>
			Vue.component('my-compoent',{
				template:'<div>測試1</div>'
			})
			
			new Vue({
				el:'#example1'
			})
		</script>
		
		
		<!-- 注冊全局組件-->
		<div id="example2">
			<my-compoent1></my-compoent1>
		</div>
		<script>
			//創(chuàng)建一個組件構(gòu)造器
			var myComponent = Vue.extend({
				template:'<div> 測試2</div>'
			})
			//注冊全局組件： (z組件名稱 組件構(gòu)造器)
			//Vue.component(tagName,options)
			Vue.component('my-compoent1',myComponent)
			
			new Vue({
				el:'#example2'
			})
		</script>
		
		
		<!-- 注冊局部組件-->
		<div id="example3">
			<my-compoent></my-compoent>
		</div>
		<div id="example4">
			<my-compoent></my-compoent>
		</div>
		<script>
			//創(chuàng)建一個組件構(gòu)造器
			var myComponent = Vue.extend({
				template:'<div> 局部組件4</div>'
			})
			//注冊組件 并指定組件的標簽 逐漸的html標簽為 my-compoent
			Vue.component('my-compoent',myComponent)
			
			new Vue({
				el:'#example4',
				components:{
					'my-component':myComponent
				}
			})
		</script>
		
		<!-- 父子組件 數(shù)據(jù)傳遞
			
			父子組件的關(guān)系：通常組件A在它的模板中使用組件B，此時組件A為父組件，組件B為子組件。父子組件應(yīng)該解耦，
			組件實例的作用域是孤立的，子組件中不能直接使用父組件的數(shù)據(jù)。應(yīng)該使用props傳遞父組件到子組件的數(shù)據(jù)，
			子組件通過events給父組件發(fā)消息，以此實現(xiàn)父子組件間的通信。 
			如上，在其他組件內(nèi)部用components聲明組件，即為局部注冊。在Vue實例中用components注冊組件時，
			可以理解為Vue實例為一個大的父組件，其他任何注冊的組件都是子組件。所以在注冊組件時，
			如果要使用Vue實例data中的數(shù)據(jù)，都要用props傳遞Vue實例中的數(shù)據(jù)，讓Vue實例的數(shù)據(jù)在組件中可用。 
			還可以用v-bind動態(tài)綁定props的值到父組件的數(shù)據(jù)，父組件數(shù)據(jù)發(fā)生變化時，子組件的數(shù)據(jù)也相應(yīng)的變化。
			
			父--》子：父組件通過props傳遞父組件到子組件
			子--》父：子組件通過events給父組件發(fā)消息
		-->
		<div id="test">
		    <template id="testProp">
		        <ul>
		            <li v-for="book in books">
		                <p>{{book.title}}</p>
		                <p>{{book.desc}}</p>
		                <p>{{book.author}}</p>
		            </li>
		        </ul>
		    <template>
		    <test-prop :book-list = "books"></test-prop>
		</div>
		<script>
			var TestProp = Vue.extend({
			    template:'#testProp',
			    props: ['book-list']
			});
			var test = new Vue({
			    el: '#test',
			    data: function(){
			        return {
			            books: [
			                {
			                    title: 'title1',
			                    desc: 'desc1',
			                    author: 'author1'
			                },
			                {
			                    title: 'title2',
			                    desc: 'desc2',
			                    author: 'author2'
			                },
			                {
			                    title: 'title3',
			                    desc: 'desc3',
			                    author: 'author3'
			                },
			            ],
			        }
			    },
			    components:{
			        'test-prop': TestProp,
			    },
			});
		</script>
	</body>
</html>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: