美文网首页
Vue组件中如何获取非Prop特性的值

Vue组件中如何获取非Prop特性的值

作者: 切糕糕 | 来源:发表于2017-11-05 08:38 被阅读80次

学习Vue.js文档的过程中,发现组件那一章,非Prop特性一节有些疑问:

所谓非 prop 特性,就是指它可以直接传入组件,而不需要定义相应的 prop。

尽管为组件定义明确的 prop 是推荐的传参方式,组件的作者却并不总能预见到组件被使用的场景。所以,组件可以接收任意传入的特性,这些特性都会被添加到组件的根元素上。

例如,假设我们使用了第三方组件 bs-date-input,它包含一个 Bootstrap 插件,该插件需要在 input 上添加 data-3d-date-picker 这个特性。这时可以把特性直接添加到组件上 (不需要事先定义 prop):

<bs-date-input data-3d-date-picker="true"></bs-date-input>

添加属性 data-3d-date-picker="true" 之后,它会被自动添加到 bs-date-input 的根元素上。

具体如何在组件中取得data-3d-date-picker的值,文档没有明示,其实应该是这么获得的:

Vue.component('bs-date-input', {
    ...
    mounted: function () {
        console.log(this.$el.getAttribute('data-3d-date-picker');
    }
});

this.$el就是组件的根元素,getAttribute已经是JavaScript的标准语法了:取得标签上属性的值。

小记一笔,希望能帮到您。

相关文章

  • Vue组件中如何获取非Prop特性的值

    学习Vue.js文档的过程中,发现组件那一章,非Prop特性一节有些疑问: 所谓非 prop 特性,就是指它可以直...

  • vue prop

    问题描述在vue项目中,父组件通过prop给子组件传值时,如果prop值是从服务器端获取,则父组件可能会传给子组件...

  • 100字写点东西_Vue_20180001

    最近做项目,写前端,用Vue。双向绑定,父组件向子组件传值,子组件prop,父组件从子组件获取值,$refs,子组...

  • 非 Prop 的特性

    一个非 prop 特性(属性)是指传向一个组件,但是该组件并没有相应 prop 定义的特性。 通过 $attrs ...

  • 对vue的props实现双向数据流

    1、 使用Prop需要遵守的规定 vue官网中规定,vue中的Prop是单向数据流 在vue中,组件中的Prop是...

  • vue2.x的变化之一:禁止修改props

    一、说明在vue1.x中,可以在子组件中改变prop的值,在vue2.x中已被废弃。官方文档解释如下: 组件内修改...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • Vue - 传值

    Vue 传值有两种:1)父组件向子组件传值(属性传值,Prop传值)2)子组件向父组件传值 一、父组件向子组件传值...

  • vue 组件 - prop

    prop 是什么 prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变...

网友评论

      本文标题:Vue组件中如何获取非Prop特性的值

      本文链接:https://www.haomeiwen.com/subject/wqlcmxtx.html