目录
第一章:组件化与模块的区别
第二章:组件的创建
2.1 创建组件的方式
2.1.1 第一种方式
用extend创建template再用component加入组件
也可以直接加入组件
2.1.2 第二种方式
2.1.3 第三种方式
模板字符串的书写有点麻烦,在字符串里容易漏
2.2 使用定义私有组件
所谓全局就是不只是用在app中,还能用在别的地方.
2.3 组件中的data
下图的组件应用会相互影响
进行如下修改后便不会了,每次创建新的组件实例的时候,都会调用一下data函数,会return一个新开辟的对象,这样就保证了每个对象都是独有的.
2.4 不同组件之间的切换
2.4.1 使用v-if与v-else切换组件
2.4.2 使用Vue提供的component元素切换组件
component后的is,因为加上了is,所以是要绑定一个值,如果要绑定的值是字符串的话要加上''.
2.5 总结
公有:
私有:
应用:
第三章 组件的传值
3.1 父组件向子组件传值
3.2 父组件向子组件传递方法
模板:
绑定:
应用:
3.3 子组件向父组件传值
模板:
绑定:
应用:
第四章:使用ref获取DOM元素和组件引用
因为在Vue.js中不推荐操作DOM元素,所以Vue提供了一个ref.
4.1 基本应用
在h3中放置一个ref
可以看到在ref中引用了DOM元素
通过this即可应用
如果放置两个ref,则会
4.2 利用ref引入组件
通过ref可以访问子组件中的值与方法