总结: Vue2中基础语法(二)

总结: Vue2中基础语法(一)_hmxs_hmbb的博客-CSDN博客

总结: Vue2中基础语法(三)_hmxs_hmbb的博客-CSDN博客

总结: Vue2中基础语法(四)_hmxs_hmbb的博客-CSDN博客

总结: Vue2中基础语法(五)_hmxs_hmbb的博客-CSDN博客

这里总结组件通讯和组件进阶.

目录:

        1.vue组件封装和使用

        2.scoped实现组件的私有化

        3./deep/深度作用选择符

        4.vue组件通讯 - 父组件传子组件(父传子)

        5.单向数据流

        6.vue组件通讯 - 子组件传父组件(子传父)

        7.在vue中发送axios

        8.使用$refs操作DOM和子组件

        9.$nextTick的基本使用

1.vue组件封装和使用

        封装组件的好处就是可以复用, 代码整洁, 方便维护. 注意: 组件的名字不能和现有的html标签名一样.

步骤:

        ①定义组件 (template, script, style)

        ②注册组件 (components: {子组件名字})

        ③使用组件 (<子组件名字 />或<子组件名字><子组件名字 />)

2.scoped实现组件的私有化

        在vue中, style的样式默认是全局的; 所以当一个父组件引入了一个子组件之后, 如果子组件和父组件里面的样式有冲突就会出现问题.

        所以就需要使用scoped属性解决. 直接在需要私有化的组件里面style标签中加上scoped属性即可.

 3./deep/深度作用选择符

        它的作用就是, 当父子组件都将样式设置了私有化(scoped)之后, 父组件使用/deep/可以控制子组件的样式.

格式:

        /deep/ button {样式}  (当然是要操作子组件里面的样式)

  

4.vue组件通讯 - 父组件传子组件(父传子)

        每一个组件都是独立的, 所以想要有联动的话; 必须使用组件之间的通讯.

        常用的通讯就是: 1. 父子(子父)  2. 兄弟  3. 爷孙(跨层级通讯)

        查看有没有传值成功, 可以再vue调试根据里面查看.

        传输数据使用props, 传结构使用<slot></slot>

步骤: 

        ①在子组件标签中设置自定义属性 (<Son :name="name" />)

        ②子组件接收 (props: ["name"], 它是以数组的方式接收)

        ③子组件中使用 ( {{ name }}} )

        ④总结(三)中会有另外一个办法直接传入一个结构给<slot></slot>

5.单向数据流

        单向数据流的意思就是在父传子的前提下, 父组件中的自定义属性中的数据发送改变之后; 子组件里面的数据也会发生改变.

        但是子组件要主动修改父组件传过来的数据的话, 会被警告; 因为子组件修改会覆盖父组件的值.

        如果父组件传过来的是一个引用数据类型的话, 就不会被警告; 因为我们修改的不是地址, 而是里面的数据.

        但是最好是遵循单向数据流的规则, 因为如果此数据是从祖先辈分那边传过来的话; 你在子组件里面修改了, 那么这一条数据流上面的所有的数据的都会被改变.

 

6.vue组件通讯 - 子组件传父组件(子传父)

        将数据抛出去给父组件使用, 或者是在子组件里面修改父组件的数据, 这些都叫子传父.

格式:

        父: <子组件 @自定义属性1 = " 父组件中method中的方法 "  @自动自定义属性2......>

        子: this.$emit('自定义事件名1', 传值1)   /* 其中自定义事件名要和父组件中自定义属性要对应 */

 

7.在vue中发送axios

        其实发送axios这件事情跟vue并没有任何的关系, axios这个技术跟vue是不沾边的. 它最大的作用就是在created函数中发送ajax.

步骤:

        ①npm i axios

        ②在script标签中使用import axios from 'axios'导入

        ③根据axios的规则发送ajax

8.使用$refs操作DOM和子组件

        $refs的作用是用来操作页面的DOM和子组件的实例. 虽然它也可以对子组件操作修改, 但是在开发中我们还是会用父传子的操作.

格式:

        this.$refs.自定义属性名

步骤:

        ①在当前的组件里面想要对dom操作的话, 就在想要操作的标签里面添加 ref = "xxx"(xxx是自定义的)属性.

        ②获取子组件的话就在使用子组件的时候, 在子组件标签里面加上 ref 属性.

 

9.$nextTick的基本使用

        在vue中视图的更新是异步的, 所以会先执行同步的代码然后再去执行异步的; 如果异步代码的后面有对此异步代码操作的同步代码的话就会报错.

        所以$nextTick的作用就是让异步代码执行完了之后, 再去执行里面的回调函数.

        在vue中不会一次执行一个异步代码, 而是将多个异步代码放在一起, 然后统一执行. 所以$nextTick里面的代码会放在异步代码的最后面, 一起执行.

格式:

        this.$nextTick(回调函数 { 业务代码 } ).