Vue——05-01组件的基本使用、全局组件，局部组件、父子组件的区别、注册组件的语法糖以及分离写法

最新推荐文章于 2023-12-01 20:32:51 发布

Southern Wind

最新推荐文章于 2023-12-01 20:32:51 发布

阅读量337

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/nanchen_J/article/details/120794193

版权

Vue 专栏收录该内容

44 篇文章 11 订阅

订阅专栏

全局注册，通过Vue.component

局部注册，通过 components:{cpnc:cpnc}

首先了解一下注册的两种方式：

全局注册，通过Vue.component

局部注册，通过 components:{cpnc:cpnc}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
            <!-- 自定义组件 -->
			<!-- <my-cpn></my-cpn> -->
			<cpnc></cpnc>
		</div>
		<script type="text/javascript">
		const cpnc = Vue.extend({
			template:
			`<div>
				<h2>标题</h2>
				<p>这是一个p标签</p>
			</div>`
		})
		// Vue.component('my-cpn',cpnc)  //全局组件化
			const vm = new Vue({
				el:'#app',
				data:{
					
				},
				methods:{
					
				},
				components:{		//局部组件化
					// cpnc:cpnc
					cpnc   //ES6语法简化写法
				}
			})
		</script>
	</body>
</html>

效果图如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
            //1、3、使用间隔符
			<my-cpn></my-cpn>
	//2、		<!-- <cpnc></cpnc> -->
		</div>
		<script type="text/javascript">
		// 
		const cpnc = Vue.extend({
			template:
			`<div>
				<h2>标题</h2>
				<p>这是一个p标签</p>
			</div>`
		})
		// Vue.component('my-cpn',cpnc)  //1、全局组件化
			const vm = new Vue({
				el:'#app',
				data:{
					
				},
				methods:{
					
				},
				components:{		//2、局部组件化
					// cpnc:cpnc
					// cpnc   //ES6语法简化写法
                ///3、这里使用驼峰命名
					myCpn:cpnc
				}
			})
		</script>
	</body>
</html>

1.在全局注册组件时，推荐组件名使用间隔符Vue.component('my-cpn', cpnc) ，也可用驼峰写法 Vue.component('myCpn',cpn)；同时父组件中只能使用<my-cpn></my-cpn> ，不能使用<myCpn></myCpn>。

2.在局部注册组件时，推荐使用components: {cpnc: cpnc}或者components: {cpnc} 还有components: {myCpnc:cpnc}都可

父组件与子组件的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子组件与父组件的区别</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<cpn2>
				<!-- <cpn1></cpn1> -->
			</cpn2>
		</div>
		<script type="text/javascript">
			const cpn1 = Vue.extend({
				template: `
			<div>
                <h2>标题一</h2>
                <p>内容1...</p>
                <p>内容1...</p>
            </div>
			`
			})
			const cpn2 = Vue.extend({
				template: `
			<div>
			    <h2>标题二</h2>
			    <p>内容2...</p>
			    <p>内容2...</p>
				<cpn1></cpn1>	
			</div>`,
				components: {
					cpn1
				}
			})
			const vm = new Vue({
				el: '#app',
				data: {

				},
				methods: {

				},
				components: {
					cpn2
				}
			})
		</script>
	</body>
</html>

就是父组件中包含一个子组件形成一个父子关系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子组件与父组件的区别</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<cpn2>
				<!-- <cpn1></cpn1> -->
			</cpn2>
		</div>
		<script type="text/javascript">
			const cpn1 = Vue.extend({
				template: `
			<div>
                <h2>标题一</h2>
                <p>内容1...</p>
                <p>内容1...</p>
            </div>
			`
			})
			const cpn2 = Vue.extend({
				template: `
			<div>
			    <h2>标题二</h2>
			    <p>内容2...</p>
			    <p>内容2...</p>
				<cpn1></cpn1>	
			</div>`,
				components: {
					cpn1
				}
			})
			const vm = new Vue({
				el: '#app',
				data: {

				},
				methods: {

				},
				components: {
					cpn2
				}
			})
		</script>
	</body>
</html>

效果：

这种用构造器的方法写太过于繁琐，这里有另一种写法：

注册组件的语法糖

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <title>全局组件语法糖</title>
</head>

<body>
    <div id="app">
        <!-- <cpn1></cpn1> -->
        <cpn2></cpn2>
    </div>
    <script>
        // 注册了全局组件，可以不用构造器
        Vue.component('cpn1',{
            template:`<div>
                        <h2>全局组件语法糖</h2>
                        <p>全局组件语法糖</p>
                    </div>`
        })
        const app = new Vue({
            el: "#app",
            data: {

            },
            components:{
                cpn2:{
                    template:`<div>
                        <h2>全局组件语法糖</h2>
                        <p>全局组件语法糖</p>
						<cpn1></cpn1>
                    </div>`
                }
            }
        })
    </script>
</body>

</html>

效果如下：

由于把html语言写在组件里面很不方便，也不太好看所以将它们分开写。

下面就用到了另外两种

组件分离写法

第一种分离写法：<script type="text/x-template" id="">

单独写一个script标签把组件写进去

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<cpn1></cpn1>
		</div>
		<script type="text/x-template" id="cpn1">    //模板分离语法
			<div>
				<h1>h1</h1>
				<p>p1</p>
			</div>
		</script>
		<script type="text/javascript">
			Vue.component('cpn1', {        //这里不要加#号
				template: '#cpn1'            //这里要加#号
			})
			const vm = new Vue({
				el: '#app',
			})
		</script>
	</body>
</html>

<script type="text/x-template" id="cpn1">

后面记得加id

输出结果：

第二种分离写法：<template>

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<cpn1>组件分离的第二种写法</cpn1>
		</div>
		<template id="cpn1">    //template标签
			<div>
				<h1>h1</h1>
				<p>p1</p>
			</div>
		</template>
		<script type="text/javascript">
			Vue.component('cpn1', {    //不加#号
				template: '#cpn1'        //加#号
			})
			const vm = new Vue({
				el: '#app',
			})
		</script>
	</body>
</html>

注意#号在什么位置添加，什么位置不添加

Southern Wind

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue——05-01组件的基本使用、全局组件，局部组件、父子组件的区别、注册组件的语法糖以及分离写法

全局注册，通过Vue.component局部注册，通过 components:{cpnc:cpnc}<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <
复制链接

扫一扫