【九月打卡】第二天 vue2.5入门

学习课程名称：vue2.5入门
章节名称：Vue中的组件
讲师：Dell

课程内容：

1. todolist功能开发
2. todolist组件拆分
3. 组件与实例的关系
4. 实现todolist的删除功能

组件与实例的关系：
Vue是由一个个实例构建而成的，
一个组件就是一个Vue的实例，每个组件内部都可以写属性，因此每一个组件都是一个Vue的实例。

组件常用的方法：

1.组件里面data必须返回对象,防止与其他组件data冲突

2.如果父组件引用子组件的值或者其他,可以让子组件触发一个事件,this.$emit(‘事件名’,‘value’),然后再向子组件绑定ref操作,给父组件绑定@事件名=‘方法’

3.如果在标签里写上:count=‘1’,那么这个1好就是number类型,因为带上:相当于绑定了表达式

4.vue里有单向数据流的概念,就是父组件能向子组件传值,而子组件不能修改父组件传的值,这是因为如果子组件的值是引用数据类型,被其他父组件修改后,所有的父组件引用的子组件的值都将改变,如果子组件非得修改父组件传值,正确的做法是在子组件data里面重新定义一个值和props里面的一致,props是父组件向子组件传值的接收者

5.给组件绑定原生事件,不需要$emit,只需要@click.native

6.兄弟之间的传值可以用vuex也可以用观察者模式,发布订阅模式 Vue.prototype.bus = new Vue() 这样子组件 this.bus.KaTeX parse error: Expected 'EOF', got '事' at position 8: emit ('事̲件',value)父组件@事件…on(‘事件’,(msg)=>{
alert(msg) }))}}

7.slot是在子组件定义的,方便父组件插入dom. 也可以使用具名slot,父组件引用时<slot=‘header’>,当然slot也可以有默认值

8.作用域插槽,子组件slot里面的数据父组件需要干预时可以使用作用域插槽,不过要在父组件引用时slot内容外面套上一层template props里面就是子组件定义slot里面的数据

9.动态组件vue自带标签 其中type是组件名