博客内容

每一篇都是认真思考与总结的结晶


Vue组件的使用

2020年04月10日   0 个评论   53 次访问   0 人点赞   夜光

在前面我们看到了组件树,组件和组件之间存在层级关系,其中非常重要的关系就是父子组件的关系......

Vue 的父组件和子组件

  • 在前面我们看到了组件树

    • 组件和组件之间存在层级关系
    • 其中非常重要的关系就是父子组件的关系
  • 父子组件错误用法:以子标签的形式在Vue实例中使用

    • 因为当子组件注册到父组件的components时,Vue会编译好父组件的模块
    • 该模板的内容以及决定了父组件将要渲染的HTML(相当于父组件中以及有了子组件的内容了)

组件可以访问Vue实例数据吗?

  • 组件是一个单独功能模块的封装:
    • 这个模块有属于自己的HTML模板,也应该有属于自己的数据data
  • 组件中的数据保存在哪里哪?顶层的Vue实例中吗?
    • 组件中不能访问Vue实例中的data,如果所有的数据都放在Vue实例中,Vue实例就会变的非常臃肿
    • Vue组件应该有自己保存数据的地方
  • 组件自己的数据保存在哪里?
    • 组件对象也有一个data属性(也可以有methods等属性)
    • 只是这个data属性必须是一个函数
    • 而且这个函数返回一个对象,对象内部保存着数据

父子组件的通信

  • 我们提到了子组件是不能引用父组件或者vue实例的数据的

  • 但是,在开发中,往往一些数据确实需要从上层传递到下层:

    • 比如在一个页面中,我们从服务器请求到了很多的数据
    • 其中一部分数据,并非是整个页面来展示的,而是需要下面的子组件进行展示
    • 这时候,直接让大组件(父组件)将数据传递给小组件(子组件)
  • 父子间的通信,Vue官方提到

    • 通过props向子组件传递数据(properties)
    • 通过事件向父组件发送消息

父--->子 props

子--->父 $emit events

真实的开发中,Vue实例和子组件的通信和父组件和子组件的通信过程是一样的

props基本语法

  • 在组件中,使用选项props来声明需要从父级接受到的数据
  • props的值有两种方式
    • 方式一:字符串数组,数组中的字符串就是传递时的名称
    • 方式二:对象,对象可以设置传递时的类型,也可以设置默认值等
  • 除了数组之外,也可以使用对象,当需要对props进行 类型等验证时,就需要对象写法了
  • 验证支持的数据类型
    • String
    • Number
    • Boolean
    • Array
    • Object
    • Data
    • Function
    • Symbol

开发时用对象多

子级向父级传递

  • 使用自定义事件的时机

    • 当子组件需要向父组件传递数据时
    • v-on不仅可以用于监听dom事件,也可以用于组件间的自定义事件
  • 自定义事件的流程

    • 在子组件中,通过$emit()来触发事件
    • 在父组件中,通过v-on来监听子组件事件

父子组件的访问方式

  • 有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者子组件访问跟组件

    • 父组件访问子组件:使用$children或$refs
    • 子组件访问父组件:使用$parent
  • $children的访问

    • this.$children是一个数组类型,它包含所有子组件对象
    • 通过遍历,取出所有子组件的message状态
  • $refs的访问

    • this.$refs是一个对象类型,默认是一个空的对象,给组件中添加ref,相当于key,开发中用的比较多

    • 	<cpn ref="aaa"></cpn>//组件中需要定义
      
  • $parent的访问

    • 	访问父组件$parent
      
  • $root访问根组件(vue实例)

编译作用域

  • 官方给出的准则:父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译

为什么使用solt

  • slot翻译为插槽
    • 在生活中很多地方都有插槽,电脑的usb,插板中的电源插槽
    • 插槽的目的是让我们原来的设备具备更多的扩展性
  • 组件的插槽
    • 组件的插槽也是为了让我们封装的组件更加具有扩展性
    • 让使用者可以决定组件内部的一些内容到底展示什么
  • 例子:移动网站中的导航栏
    • 移动开发中,几乎每个页面都有导航栏
    • 导航栏我们比然会封装成一个插件,比如nav-bar组件
    • 一旦有了组件,我们就可以在多个页面中复用了

作用域插槽:准备

  • 作用域插槽是slot是一个比较难理解的点
    • 父组件替换插槽的标签,但是内容由子组件来提供
  • 我们先提一个要求
    • 子组件中包含一组数据,比如:planguages:['javaScript','Python','Swift']
    • 需要在多个界面进行展示:
      • 某些页面是以水平方向展示的
      • 某些页面是以列表形式展示的
      • 某些页面直接展示一个数组
    • 内容用在子组件,希望父组件告诉我们如何展示
      • 利用slot作用域插槽就可以了

JavaScript原始功能

  • 在网页开发的早期,Js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的
  • 随着ajax异步请求的出现,慢慢形成了前后端的分离
    • 客户端要完成的事情越来越多,代码量也是与日剧增
    • 为了应对代码量的剧增,我们通常会将代码组织在多个js文件中,进行维护
    • 但是这样依然不能避免一些灾难性的问题

评论区



发表评论

昵称和评论内容是必填项,邮箱选填,用来交流信息

请输入评论

请输入昵称

显示评论区

  • sss  2020年09月23日 21:45:08

    输入一个评论测试一下功能

  • 。。  2020年03月30日 13:43:45

    666

  •  2020年03月30日 13:43:37

    666

  • 。。  2020年03月30日 13:42:02

    12345666

  • yubao99599  2020年03月27日 09:13:19

    非常棒



79

夜光网站

网站均来自自己课余时间所做,感谢来访

© 2019 夜光网. ALL RIGHTS RESERVED.
本站已运行 184天19小时59分19秒
THEME KRATOS MADE BY XIAOYOU MODIFIED BY XIAOYOU SITEMAP
赣ICP备19003009号