一、固定格式的坑
<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将组件加载过一次变放在内存缓存中了,就不会没切换一次加载一次了