当前位置：首页 > article >正文

vue组件学习（一）

article 2025/1/17 9:37:57

1. 全局注册和局部注册

声明vue实例

全局注册

import { createApp } from './vue.js'
const app = createApp({})
app.component('组件名', /**/)

因为是直接在app上创建的，所以在任何组件中都可以使用注册的组件

局部注册

局部注册则是在对应的vue组件中的components: { 组件 }
只能在当前组件中使用，他不会传递给子组件或更深层次的组件
例如：

<script>
import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
}
</script>

<template>
  <ComponentA />
</template>

2.组件中的传值 props

在我们注册号组件之后，我们要使用组件就需要用到里面的数据
怎么传值呢？答案是使用props
props是子组件用于接受父组件数据的
例如

// 父组件
import ComponentA from './ComponentA.vue';
export default{
	data(){
		drugList:{
			drugName:'阿莫西林',
			drugCode:'abc'
		}
	},
	components:{ComponentA}

}
<template>
	<ComponentA :drug-name = "drugList.drugName" :drug-code="drugList.drugCode"/>
</template>

//子组件：
<template>
	<p>{{ drugName }}</p>
	<p>{{ drugCode }}</p>
</template>

<script>
export default{
 props:{
	drugName: {
		type	: String,
		required: true
	},
	drugCode: {
		type	: String,
		required: true
	}
 }

}
</script>

如果drugList里面的属性太多了那我们不可能一个个都v-bind绑上去
这时候可以直接v-bind这个对象

//父组件
<template>
	<ComponentA v-bind="drugList"/>
</template>

//子组件：
<template>
	<p>{{ drugList.drugName }}</p>
	<p>{{ drugList.drugCode }}</p>
</template>

<script>
export default{
 props:{
	drugList: {
		type	: Object,
		required: true
	},
 }

}
</script>

数据传输方向：父组件传到子组件。

子组件要是修改父组件的值会报错
如果在遇到需要使用父组件传进来的值作为变量需要修改的话可以将他重新赋值或者作为计算属性（因为父传进来的是引用）

export default{
	props:{
		drugList: {
			type	: Object,
			required: true
		},
	},
	
	data(){
		return{
			drugListNew: JSON.parse(JSON.stringify(this.drugList))//深拷贝
		}
	}

}
<template>
	<button @click="drugListNew.drugName='123'"></button>
</template>

3.事件

使用this.$emit从子组件向父组件发送通知，父组件监听并处理
子组件

子组件
<template>
	<button @click="methodA"></button>
</template>
<script>
	export default{
		data(){
			return{
				name:'测试名字'
			}
		},
		
	
		methods: {
			methodA(){
				console.log('处理完成')
				this.$emit('someEvent', this.name)
			}
		}
	}
</script>

父组件

<template>
	<button @some-event="handleSomeEvent"></button>
</template>

<script>
	export default{
		methods: {
			handleSomeEvent(data){
				console.log(data)
			}
		}
	
	}
</script>

事件校验

<script>
	export default{
		emits:{
			click: null,//代表click事件不需要校验
			
			submit: ({name, code})=>{
				if(name && code) return true
				else	return false
			}
		},
		methods: {
			submitForm(name, code){
				this.$emit('submit', {name, code})
			}
		}
	}
</script>