初学vue笔记----component组件

最新推荐文章于 2023-06-18 22:14:59 发布

小黑猪hhh

最新推荐文章于 2023-06-18 22:14:59 发布

阅读量152

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_46074818/article/details/117397483

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

组件

组件注册
自定义属性props
自定义事件
插槽

组件注册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app1">
			<!-- 全局注册 -->
			<button-text ></button-text>
			<!-- 局部注册 -->
			<parttest ></parttest>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		/**
		 * 组件：能达到复用目的。也有自己的生命周期
		 * 组件注册
		 * 1.vue数组的全局注册(开发中用得较多，一套组件易维护)
		 * 2.vue组件的局部注册(常见场景在引入第三方库)
		 * 命名规则
		 * 1.首字母大写的驼峰式
		 * 2.短横线分隔命名
		 */
		//1.全局注册
		Vue.component('button-text',{
			data(){ //必须是方法
				return{
					title:"我是子组件的title",
				}
			},
			template:'<button type="button">{{title}} </button>',
		})
		var vm=new Vue({
			el:'#app1',
		})
		//2.局部注册
		let parttest = {
			template:'<button type="button">局部注册</button>'
		}
		var vm=new Vue({
		 	el:'#app1',
			components:{parttest}//使用components局部注册
		})
	</script>
</html>

自定义属性props

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app1">
			<!-- 自定义属性 -->
			<button-text titleprop1="使用自定义的属性"></button-text>
			<button-text :titleprop1="titletest1"></button-text>
			<button-text ></button-text>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		/**
		 * props==properties(自定义属性)
		 * 定义：
		 * 1.数组['属性名1'，'属性名2'……]
		 * 2.对象定义
		 * 命名：
		 * 大小写不敏感(浏览器会将大写解释成小写)。若命名时以驼峰式命名如postTitle，在html中写属性时写的是post-title
		 * 自定义属性也可以用v-bind。:postTitle使用
		 */
		Vue.component('button-text',{
			data(){
				return{
					title:"我是子组件",
				}
			},
			//数组形式定义
			// props:['titleprop1'],
			//对象形式定义
			// props:{
			// 	titleprop1:String
			// },
			props:{
				titleprop1:{
					type:String,
					require:true,//必填项。虽然写的是ture，但是并不会有什么影响
					default:"我是一个默认值"
				}
			},
			template:' <button type="button">{{titleprop1}}</button>',
		})
		var vue_component=new Vue({
			el:'#app1',
			data(){
				return{
					titletest1:"我是父组件的值"
				}
			},
		})
	</script>
</html>

自定义事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app1">
			<!-- 自定义事件 -->
			<button-text :titleprop1="titletest1" @myevent="pearentfun"></button-text>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		/**
		 * 自定义事件
		 * 在子组件中用this.$emit('myevent') 传递自定义事件。
		 * <my-component v-on:my-event="doSomething"></my-component>  其中my-event子组件中自定义事件名，doSomething是在父组件中的，可以是方法
		 * 自定义事件好处
		 * 1.子组件可以很好利用父组件，可以把子组件数据传递给父组件
		 * 2.通过自定义事件，可以很好修改父组件数据，实现数据同步
		 */
		Vue.component('button-text',{
			data(){
				return{
					title:"我是子组件",
				}
			},
			template:'<button type="button" @click="clickme">{{title}}</button>',
			methods:{
				clickme(){
					this.$emit("myevent",{name:"我是子组件的参数name值"})
				}
			}
		})
		var vue_component=new Vue({
			el:'#app1',
			data(){
				return{
					titletest1:"我是父组件的值"
				}
			},
			methods:{
				pearentfun(obj){
					console.log("你现在点击的是子组件传过来的一个自定义事件哦！")
					console.log("参数name：",obj.name)
				}
			}
		})
	</script>
</html>

插槽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app1">
			<!-- 插槽 -->
			<button-text >我是父组件，我要使用子组件的插槽</button-text>
			<button-text >{{titletest1}}</button-text>
			<button-text ></button-text>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
				Vue.component('button-text',{
			data(){
				return{
					title:"我是子组件",
				}
			},
			template:' <button type="button"><slot>插槽</slot></button>',
		})
		var vue_component=new Vue({
			el:'#app1',
			data(){
				return{
					titletest1:"我是父组件的值"
				}
			},
		})
	</script>
</html>

小黑猪hhh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学vue笔记----component组件

组件组件注册自定义属性props自定义事件插槽组件注册<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="app1">  <button-text ></button-text
复制链接

扫一扫