Vue.js组件开发与通信实践-优快云博客

本文链接：https://blog.youkuaiyun.com/ChenBo8520/article/details/125196125

根组件

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id = "app">
			<cp></cp>
		</div>
		<template id = "cp">
			<p>{{mn}} <button @click="fun">反馈</button></p>
		</template>
		<script>
		
			
			//全局组件开发  template  可视区域
			//现在有2个组件，cp app  在app中播放cp中的东西
 			const cp={
				data(){
					return{
						mn:'梦华录'
					}
				},
				methods:{
					fun(){
						alert("影片真好看！")
					}
				},
				template:'#cp'
			}
			const app={
				data(){
					return{
						
						
					}
				}
				
				
			}
			//创建vue应用
			//let vm = Vue.createApp({})
			//依赖于cp 创建VUE应用  就变成了根组件  就不再是全局组件
			let vm = Vue.createApp(cp)
			//注册组件
			//vm.component('cp',cp)
			//挂载到html结构里
			vm.mount('#app')
		</script>
	</body>
</html>

全局组件

const cp={},template:'#cp'

vm.component('cp',cp) 注册

vm.mount('#app') 挂载

组件大多是注册局部组件

全局组件在任何地方都可以使用，可能导致用不上这个组件但要加载这个组件，造成资源浪费。

接下来创建局部组件

const cA = {template:`` }

const app={ }, components:{'ca' : cA }

创建并挂载后，在app中调用即可。

如果组件名由2个单词组成，且有大写字母，例如tempCom，调用时要用<temp-com></temp-com>! 很奇怪。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id = "app">
			<ca></ca>
		</div>
		
		<script>
			const cA = {
				template:`<h3>组件A</h3>`
			}
			const app={
				data(){
					return{
						
					}
				},
				components:{
					//子组件  组件名称-组件
					'ca' : cA
				}
			}
			let vm = Vue.createApp(app)
			vm.mount('#app')
		</script>
	</body>
</html>

组件之间的通信问题

尤其是父组件与子组件之间的通信

cA是app的子组件

props中是接受组件的数据信息，类型不限

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id = "app">
			<ca href="向前看向钱冲"></ca>
		</div>
		
		<script>
			//父  ==>  子
			const cA = {
				props:['href'],
				template:`<h3>组件A{{href}}</h3>`
			}
			const app={
				data(){
					return{
						
					}
				},
				components:{
					//子组件  组件名称-组件
					'ca' : cA
				}
			}
			let vm = Vue.createApp(app)
			vm.mount('#app')
		</script>
	</body>
</html>

再来一个例子，父组件给子组件传递一个图片

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id = "app">
			<ca href="D:\优快云\vue.png"></ca>
		</div>
		
		<script>
			//父  ==>  子
			const cA = {
				props:['href'],
				template:`<img :src = "href">`
			}
			const app={
				data(){
					return{
						
					}
				},
				components:{
					//子组件  组件名称-组件
					'ca' : cA
				}
			}
			let vm = Vue.createApp(app)
			vm.mount('#app')
		</script>
	</body>
</html>