VUE——组件

最新推荐文章于 2025-01-24 18:10:09 发布

HJHxHJH

最新推荐文章于 2025-01-24 18:10:09 发布

阅读量350

点赞数

分类专栏：前端知识 # 前端——VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/sinat_24044957/article/details/122249565

版权

前端知识同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

前端——VUE

1 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中组件的创建方式，包括通过`Vue.extend`、直接配置和使用`template`元素。同时，阐述了模块化与组件化的区别，模块化侧重代码逻辑划分，而组件化关注UI界面的复用。文章还展示了如何在Vue组件间传递参数，包括父向子、子向父的双向通信，并提供了实例代码进行演示。

摘要由CSDN通过智能技术生成

组件的目的：

拆分Vue实例的代码量，划分功能模块。模块化和组件化的区别：

模块化：从代码逻辑进行划分的
组件化：从UI界面的角度进行划分，方便UI组件的重用

组件创建

方式一

// 定义组件模板
var com1 = Vue.extend({
	template:'<div>Html代码<div>' //template里面的html代码只能有一个根元素，即最外层必须包一层
})
// 配置组件全局标签名称
Vue.component('myCom1',com1)
// 特别需要注意的点：标签不支持大写，若组件名称含大写则转换为‘-小写’
// 如上面的标签则为：<my-com1></my-com1>

方式二

// 创建并定义组件
Vue.component('myCom1', {
	template:'<div>Html代码<div>'
})

方式三

在vue实例外面使用template元素

<body>
<div id='app'></div>
<!- 创建组件 ->
<template id='tmpl'>
	<div>........</div>
<template>
</body>

组件传参方式

父组件向子组件传递参数

通过v-bind绑定属性
子组件通过prop定义属性获取值

<com1 v-bind:parentmsg='msg'></com1>
Vue.component('com1 ', {
	template:'<div>Html代码 {{parentmsg}}<div>'
	prop:['parentmsg']
})

父组件向子组件传递方法

通过事件绑定机制（例如：v-on）绑定事件
子组件通过prop定义属性获取值

<div id='app'>
<com1 v-on:func='show'></com1>
</div>
Vue.component('com1 ', {
	template:'<div @click='myclick'>Html代码 {{parentmsg}}<div>'
	methods:{
		myclick:function({
			// 调用父组件传过来的func方法，从第二个参数开始就是方法的参数
			this.$emit('func',12,123)
		})
	}
})

<script>
var vm = new Vue({
	el:'#app',
	methods:{
		'show':function(data,date2){}
	}
})

</script>

子组件向父组件传递

通过事件传递

<div id='app'>
<com1 v-on:func='show'></com1>
</div>
Vue.component('com1 ', {
	template:'<div @click='myclick'>Html代码 {{parentmsg}}<div>'
	methods:{
		myclick:function({
			// 调用父组件传过来的func方法，从第二个参数开始就是方法的参数
			this.$emit('func',12,123)
		})
	}
})

<script>
var vm = new Vue({
	el:'#app',
	data:{
		funcMsg:null;
	},
	methods:{
		'show':function(data,date2){
			this.funcMsg = data;
		}
	}
})

</script>