vue组件开发中的注意点

一、固定格式的坑

<ul><li></li></ul>因为ES规范中ul下面只能放li，所以<ul><my-content></..></..>是会报错的

修改：<li :is="my-content">

二、关于$ref

在普通的dom中他指向这个dom元素

在组件中它指向一个组件的引用

三、父子组件传参

父组件向子组件传参 :content=“xxxx” ，prop 注意点，在子组件中不能直接修改传过来的值，而是要克隆一份副本，将穿过的值变成自己的（单向数据流）你随随便便修改了父组件传过来的参数，那如果其他参数也接受父组件传过来的同样的参数怎么整？

子组件向父组件传参 this.$emit('组件名字', 参数)

四、传递的参数格式

:content="xx" 有冒号，代表的是js表达式，所以 :content="123" 代表的是数字123

content="xx" 无冒号，代表的是字符串，所以 :content="123" 代表的是字符串“123”

五、给组件绑定原生事件

<my-child @click.navtive ="xxxx"> 注意要加上.navtive 不然对组件的click点击会报错

六、非父子组件的传值 1.vuex 2.bus/总线/发布订阅模式/观察者模式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>非父子组件传值(bus/总线/发布订阅模式/观察者模式)</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="app">
		<son content="firstClild"></son>
		<son content="secondClild"></son>
	</div>

	<script>
		// 实现非父子组件传参的关键点,Vue类下面有一个原型属性，将这个原型属性指向Vue的一个实例对象
		Vue.prototype.bus = new Vue();


		Vue.component('son',{
			props:{
				content:String
			},
			template:'<div @click="handleClick">{{content}}</div>',
			methods:{
				handleClick:function(){
					//this.prop指vue的一个实例，每一个实例上面都有$emit方法，传递
					this.bus.$emit('change',this.content);
				}
			},
			//生命周期钩子，监听
			mounted:function(){
				this.bus.$on('change',function(msg){
					//此处弹出来两次是因为两个组件都进行了同样事件的监听
					alert(msg);
				})
			}
		})

		var app = new Vue({
			el:"#app",
		});
	</script>
</body>
</html>

七、动态组件

哪一个toggle特效的dom为例子

<component :is="xxx"> xxx是组件名字，是哪个组件就加载哪一个

另外v-once将组件加载过一次变放在内存缓存中了，就不会没切换一次加载一次了

vue组件开发中的注意点

猜你喜欢