资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/手挽手带你学VUE：二档 组件开发以及常用全局api

手挽手带你学VUE：二档 组件开发以及常用全局api

fredshare / 3074人阅读

摘要：我们想要在中做到子传参给父，那我们的父组件就要像子组件伸出小偷之手。所在组件的更新时调用，但是可能发生在其子更新之前。指令所在组件的及其子全部更新后调用。

视频教程 由于思否不支持视频链接 视频请移步 http://www.henrongyi.top 你能学到什么

二档视频当然要比一档视频难一点，如果前面的内容还没有消化完毕的话，还是建议大家继续消化前面的内容，然后再看接下来的部分。这一部分是VUE的核心，讲到组件化开发的基础部分，多学，多练。

生命周期

Vue官网给出的生命周期图

{{message}}

这里大家也可以看到，我们在 app内部只引用了 shuaiQm这一个组件， shuaiQm又包含他的子组件 childer，因此父子都被渲染出来了。这就是父子组件的写法。

插槽slot

这时候又有朋友要问了，如果我想在组件里面继续书写html怎么办呢？ slot插槽就是个很好的东西了，这里我用代码给大家演示一下slot插槽的用法。




    
    
    
    Document





    

    {{message}}
       
           hello world

插槽只有这一个作用吗？不，那你就太小看插槽了，接下来要介绍一下插槽的作用域插槽用法。

作用域插槽，听不懂可跳过,后面还会详细讲解

使用时候子组件标签Child中要有 template scope=”scopeName” 标签，再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据，所以作用域插槽是一种子传父传参的方式，解决了普通slot在parent中无法访问child数据的去问题；
这么说太复杂了，直接上个例子显而易见。
如果这里听不懂可以暂时跳过，只需要会用slot插槽的基础用法即可，在后面讲Element项目的时候，我会结合实例给大家讲解这个作用域插槽。




    
    
    
    Document





    

    {{message}}
prop 传递参数给组件（父传值给子）

讲到这里，已经到了VUE一个需要理解的地方了，父子传值，我们先讲解一下，如何将值传递给子组件，这个整体来说还是比较简单。引用我们的组件的标签上写上属性，并且把参数传入，这样我们在组件内部使用props就可以获得传过来的值了，我们还是以上面的代码为例。




    
    
    
    Document

这一段代码注意，再给html上面添加属性的时候，我们是不可以直接添加驼峰命名的，因为html不会区分大小写，所以我们建议属性的命名方式是完全小写或者横线命名的方式。如果我们使用横线命名来传递参数的话，在接收的时候，横线后面的首字母大写，变成小驼峰来接受，否则使用的时候它会被渲染成NaN,这是为什么呢？别忘了我们一档讲过的，在插值表达式内，是支持简单计算的，- 会被当作减号处理，这里我会在视频中给大家详细讲解。

子组件传值给父组件

学到这里，如果大家已经有些迷茫，现在请先停下，喘口气，这里难度已经慢慢加大。我也会放慢讲解的速度。
如果我们想要获取到子组件内部的值，该怎么办呢？有什么办法能够让我们回去到内部的值呢？在这里，先给大家插播一个JS写法，我觉得这有助于理解子传父值。

function thief (gold) {
    console.log(gold)
}

function richMan (){
    var money = 1000086
    thief(money)
}

richMan()

我们想要在vue中做到子传参给父，那我们的父组件就要像子组件伸出小偷之手。我在代码中为大家书写一下




    
    
    
    Document





    

      {{qmGold}}

这样 你理解子传参给父了吗？

其余会用到的全局API

Vue.directivet
Vue.directive 我们用来编写全局指令，它也有自己的生命周期

// 注册
Vue.directive("my-directive", {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

/*
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

在这些钩子函数内部，都可以接受三个参数，我们来看看文档中的写法。
el：指令所绑定的元素，可以用来直接操作 DOM 。

binding：一个对象，包含以下属性：
    name：指令名，不包括 v- 前缀。
    value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
    oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
    arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
    modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

这里我会在视频中结合官方样例讲解
*/

上面我们罗列了这么多它的特性，不过真正开发中，我们最常用的只有 bind 和 update 这两个时期
我们可以简写为

    Vue.directive("color", function (el, binding) {
        el.style.backgroundColor = binding.value
    })

下面我们来举个例子




    
    
    
    Document





    

      

          我来测试测试directive

好了我们可以看到加上v-color的这个div内部的文字变红了

Vue.set

Vue.set官网给出的用法是 Vue.set( target, key, value ) 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性
这么听起来是有些笼统的，我给大家用代码展示一下它在我们日常开发中经常出现的场景。




    
    
    
    Document



    

      
    
        
  • {{item.hello}}
    •

在上述代码中，我们通过this.list[0]直接修改了数组中的第0项目对象，那么视图是没有更新的，但是数据确实变更了，这是为什么呢？因为Vue是通过Object.defineProperty()来进行数据的监听，它的机制导致了它无法直接检测出数组中这种情况的变化。这时候我们就需要使用Vue.set了




    
    
    
    Document



    

      
    
        
  • {{item.hello}}
    • 
      

      
    


    
    





    
    
    
    Document



    

      
    
        
  • {{item.hello}}
    •

看 是不是强制将它改变了呢？ 有了Vue.set 数据就都不再得瑟了

云服务器 私有云 带你学c带你飞 vue组件开发 vue组件 vue父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53522.html

相关文章

  • 手挽手带你学VUE：二档 组件开发以及常用全局api

    摘要：我们想要在中做到子传参给父，那我们的父组件就要像子组件伸出小偷之手。所在组件的更新时调用，但是可能发生在其子更新之前。指令所在组件的及其子全部更新后调用。 视频教程 由于思否不支持视频链接 视频请移步 http://www.henrongyi.top 你能学到什么 二档视频当然要比一档视频难一点，如果前面的内容还没有消化完毕的话，还是建议大家继续消化前面的内容，然后再看接下来的部分。...

    Pink 评论0 收藏0

  • 手挽手带你学React：二档 React生命周期以及组件开发

    摘要：手挽手带你学入门二档组件开发的开始，合理运用生命周期和组件，能够让你的开发变地流利又这篇文章带你学会创建组件，运用组建。 手挽手带你学React入门二档,组件开发的开始，合理运用生命周期和组件，能够让你的开发变地流利又happy,这篇文章带你学会创建组件，运用组建。学起来吧！ React 组件生命周期 学习React，生命周期很重要，我们了解完生命周期的各个组件，对写高性能组件会有很大...

    izhuhaodev 评论0 收藏0

  • 手挽手带你学VUE：一档 VUE简介以及常用内部指令

    摘要：这样，我们用写的就写好了。真的假的大家可以看到，这些在插值表达式内的表达式直接返回了运行完成的结果，值得一提的是，差值表达式内的规则和标签内的规则是类似的。 视频教程 由于思否不能插入视频，视频请大家移步，http://www.henrongyi.top 什么是VUE VUE是一套用于构建用户界面的渐进式框架,VUE并不是一个真正意义上的mvvm框架,它更倾向是一种数据驱动框架.所以我...

    不知名网友 评论0 收藏0

  • 手挽手带你学VUE：一档 VUE简介以及常用内部指令

    摘要：这样，我们用写的就写好了。真的假的大家可以看到，这些在插值表达式内的表达式直接返回了运行完成的结果，值得一提的是，差值表达式内的规则和标签内的规则是类似的。 视频教程 由于思否不能插入视频，视频请大家移步，http://www.henrongyi.top 什么是VUE VUE是一套用于构建用户界面的渐进式框架,VUE并不是一个真正意义上的mvvm框架,它更倾向是一种数据驱动框架.所以我...

    go4it 评论0 收藏0

  • 手挽手带你学VUE：三档 VUE构造期内常用属性

    摘要：视频教程由于思否不支持视频外链视频请移步你能学到什么手挽手带你学入门三档构造器内部的各种属性的使用，，，，这四个属性，在工作中会经常用到。在构造器的外部我们也可以通过实例来调用方法。 视频教程 由于思否不支持视频外链 视频请移步 http://www.henrongyi.top 你能学到什么 手挽手带你学VUE入门三档,VUE构造器内部的各种属性的使用，methods，compute...

    wslongchen 评论0 收藏0

发表评论

登陆后可评论

0条评论

fredshare

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<