<vue 元件 1、元件化基本使用>

阿新 • • 發佈：2021-11-19

程式碼結構

元件就是將複雜的功能拆分成簡單的塊，拆分後的塊可以被多處使用。

元件的使用分成三個步驟：

1、建立元件構造器 Vue.extend()

2、註冊元件 Vue.component()

3、使用元件 <my-cpn></my-cpn>

一、 01-元件化的基本使用

1、效果

2、程式碼

01-元件化的基本使用.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>

		<div id="app">
			<!--3.使用元件-->
			<my-cpn></my-cpn>
			 

			<div>
				<div>
					<my-cpn></my-cpn>
				</div>
			</div>
		</div>

		<my-cpn></my-cpn>

		<script src="vue.js"></script>
		<script>
			// 1.建立元件構造器物件
			let cpnC = Vue.extend({
				template: `
				<div>
					<h2>元件的標題</h2>
					<p>--------元件的內容-----------</p>
				</div>`
			})

			// 2.註冊元件
			Vue.component('my-cpn', cpnC)

			let app = new Vue({
				el: '#app',
				data: {
					message: '你好啊'
				}
			})
		</script>

	</body>
</html>

二、 02-全域性元件和區域性元件

1、效果

（1）Vue.component('cpn', cpnC) 這樣註冊是全域性元件

（2）這樣註冊就是區域性元件

let app = new Vue({

el: '#app',

components: {

// cpn使用元件時的標籤名

cpn: cpnC

}

})

2、程式碼

02-全域性元件和區域性元件.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>

		<div id="app">
			<cpn></cpn>
		</div>

		<div id="app2">
			<cpn></cpn>
		</div>

		<script src="vue.js"></script>
		<script>
			// 1.建立元件構造器
			const cpnC = Vue.extend({
				template: `
					<div>
						<h2>元件的標題</h2>
						<p>--------元件的內容-----------</p>
					</div>
					`
			})

			// 2.註冊元件(全域性元件, 意味著可以在多個Vue的例項下面使用)
			 // Vue.component('cpn', cpnC)

			// 疑問: 怎麼註冊的元件才是區域性元件了?

			let app = new Vue({
				el: '#app',
				components: {
					// cpn使用元件時的標籤名
					cpn: cpnC
				}
			})

			const app2 = new Vue({
				el: '#app2'
			})
		</script>

	</body>
</html>

三、03-父元件和子元件

1、效果

2、程式碼

03-父元件和子元件.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>

		<div id="app">
			<cpn2></cpn2>
		</div>

		<script src="vue.js"></script>
		<script>
			// 1.建立第一個元件構造器(子元件)
			let cpnC1 = Vue.extend({
				template: `
				<div>
					<h2>子元件的標題</h2>
					<p>--------元件的內容-----------</p>
				</div>
				`
			})


			// 2.建立第二個元件構造器(父元件)
			let cpnC2 = Vue.extend({
				template: `
				<div>
					<h2>父元件的標題</h2>
					<p>--------元件的內容-----------</p>
					<cpn1></cpn1>
				</div>
				`,
				components: {
					cpn1: cpnC1
				}
			})

			// root元件
			let app = new Vue({
				el: '#app',
				data: {
					message: '你好啊'
				},
				components: {
					cpn2: cpnC2
				}
			})
		</script>

	</body>
</html>

四、04-元件模板的分離寫法

1、效果

這個效果不太重要，重要的是程式碼的分離寫法

2、程式碼

04-元件模板的分離寫法.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>

		<div id="app">
			<cpn></cpn>
			<cpn></cpn>
		</div>

  
		<template id="cpn">
			<div>
				<h2>元件的標題</h2>
				<p>--------元件的內容-----------</p>
			</div>
		</template>

		<script src="vue.js"></script>
		<script>
			// 1.註冊一個全域性元件
			Vue.component('cpn', {
				template: '#cpn'
			})

			const app = new Vue({
				el: '#app'
			})
		</script>

	</body>
</html>

五、05-元件中的資料存放問題

1、效果

2、程式碼

05-元件中的資料存放問題.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>

		<div id="app">
			 <h2>{{title}}</h2>
			<cpn></cpn>
		</div>
	 
		<!--2.template標籤-->
		<template id="cpn">
			<div>
				<h2>{{title}}</h2>
			</div>
		</template>

		<script src="vue.js"></script>
		<script>
			// 1.註冊一個全域性元件
			Vue.component('cpn', {
				template: '#cpn',
				data() {
					return {
						title: '我是元件中的標題'
					}
				}
			})

			let app = new Vue({
				el: '#app',
				data: {
					message: '你好',
					title: '我是標題'
				}
			})
		</script>

	</body>
</html>