本篇文章带大家继续学习vue，详细介绍一下vue入门必备知识中的watch侦听器、计算属性、vue-cli和vue组件，希望对大家有所帮助！
（4）组件之间的父子关系
4.1 使用组件的三个步骤
4.2 注册全局组件
1️⃣ 通过 components 注册的是私有子组件；例如：在组件 A 的 components 节点下，注册了组件 F。则组件 F 只能用在组件 A 中；不能被用在组件C 中。
2️⃣ 在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。
代码演示如下：
（5）组件的 props
props 是组件的自定义属性，在封装通用组件的时候，合理地使用props 可以极大的提高组件的复用性！
语法演示如下：
5.1 props 是只读的
1️⃣ vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错；
2️⃣ 要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的！
5.2 props 的 default 默认值
在声明自定义属性时，可以通过 default 来定义属性的默认值。示例代码如下：
5.3 props 的 type 值类型
在声明自定义属性时，可以通过 type 来定义属性的值类型。示例代码如下：
5.4 props 的 required 必填项
在声明自定义属性时，可以通过 required 选项，将属性设置为必填项，强制用户必须传递属性的值。示例代码如下：
（6）组件之间的样式冲突问题
1️⃣ 默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。
2️⃣ 导致组件之间样式冲突的根本原因是：
单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的；每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素
6.1 思考：如何解决组件样式冲突的问题
为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域，示例代码如下：
6.2 style 节点的 scoped 属性
为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题：
6.3 /deep/ 样式穿透
如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器。
（学习视频分享：vue、vue）
以上就是浅析Vue中的watch侦听器、计算属性、Vue-cli和组件的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3046793.html
