脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 组件 props

Vuejs 组件——props数据传递的实例代码

 更新时间：2017年03月07日 16:43:30   作者：董董董董董董董董董大笨蛋  
本篇文章主要介绍了Vuejs 组件——props数据传递的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

本篇资料来于官方文档：http://cn.vuejs.org/guide/components.html#Props

本文是在官方文档的基础上，更加细致的说明，代码更多更全。

简单来说，更适合新手阅读

props数据传递

①组件实例的作用域：

是孤立的，简单的来说，组件和组件之间，即使有同名属性，值也不共享。

<div id="app"> 
  <add></add> 
  <del></del> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    components: { 
      "add": { 
        template: "<button>btn：{{btn}}</button>", 
        data: function () { 
          return {btn: "123"}; 
        } 
      }, 
      del: { 
        template: "<button>btn：{{btn}}</button>", 
        data: function () { 
          return {btn: "456"}; 
        } 
      } 
    } 
  }); 
</script>

渲染结果是：

2个按钮，第一个的值是123，第二个的值是456（虽然他们都是btn）

②使用props绑定静态数据：

【1】这种方法用于传递字符串，且值是写在父组件自定义元素上的。

【2】下面示例中的写法，不能传递父组件data属性中的值

【3】会覆盖模板的data属性中，同名的值。

示例代码：

<div id="app"> 
  <add btn="h"></add> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      h: "hello" 
    }, 
    components: { 
      "add": { 
        props: ['btn'], 
        template: "<button>btn：{{btn}}</button>", 
        data: function () { 
          return {btn: "123"}; 
        } 
      } 
    } 
  }); 
</script>

这种写法下，btn的值是h，而不是123，或者是hello。

【4】驼峰写法

假如插值是驼峰式的，而在html标签中，由于html的特性是不区分大小写（比如LI和li是一样的），因此，html标签中要传递的值要写成短横线式的（如btn-test），以区分大小写。

而在props的数组中，应该和插值保持一致，写成驼峰式的（如btnTest）。

例如：

props: ['btnTest'], 
template: "<button>btn：{{btnTest}}</button>",

正确的写法：

<add btn-test="h"></add>

假如插值写短横线式，或者是html标签写成驼峰式，都不能正常生效。（除非插值不写成驼峰式——跳过大小写的限制，才可以）

③利用props绑定动态数据：

简单来说，就是让子组件的某个插值，和父组件的数据保持一致。

标准写法是（利用v-bind）：

<add v-bind:子组件的值="父组件的属性"></add>

如代码

<div id="app"> 
  <add v-bind:btn="h"></add> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      h: "hello" 
    }, 
    components: { 
      "add": { 
        props: ['btn'], 
        template: "<button>btn：{{btn}}</button>", 
        data: function () { 
          return {'btn': "123"}; //子组件同名的值被覆盖了 
        } 
      } 
    } 
  }); 
</script>

说明：

【1】btn使用的父组件data中 h的值；

【2】子组件的data的函数中返回值被覆盖了。

【3】也就是说，使用v-bind的是使用父组件的值（根据属性名），没有使用v-bind的是将标签里的数值当做字符串来使用。

【4】依然需要使用props，否则他会取用自己data里的btn的值

④字面量和动态语法：

【1】简单来说，不加v-bind的，传递的是字面量，即当做字符串（例如1也是字符串，而不是number类型）；

【2】加上v-bind的，传递的是JS表达式（因此才能传递父组件的值）；

【3】加上v-bind后，如果能找到父组件的值，那么使用父组件的值；如果没有对应的，则将其看做一个js表达式（例如1+2看做3，{a:1}看做是一个对象）；

如代码：

<div id="app"> 
  <add v-bind:btn="1+2"></add> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      h: "hello" 
    }, 
    components: { 
      "add": { 
        props: ['btn'], 
        template: "<button>btn：{{btn}}</button>" 
      } 
    } 
  }); 
</script>

这里的btn的值是3（而不是没有加v-bind时，作为字符串的1+2）

⑤props的绑定类型：

【1】简单来说，分为两种类型，即单向绑定（父组件能影响子组件，但相反不行）和双向绑定（子组件也能影响父组件）；

【2】单向绑定示例：（默认，或使用.once）

<div id="app"> 
  父组件： 
  <input v-model="val"><br/> 
  子组件： 
  <test v-bind:test-Val="val"></test> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      val: 1 
    }, 
    components: { 
      "test": { 
        props: ['testVal'], 
        template: "<input v-model='testVal'/>" 
      } 
    } 
  }); 
</script>

说明：

当父组件的值被更改后，子组件的值也随之更改；

当子组件的值被更改后，父组件的值不会变化，而假如再次修改父组件的值，子组件会再次同步。

另外需要注意的是，子组件如果要同步绑定，那么子组件的input需要是v-model，而不能是value属性（那样只能单项绑定，且修改子组件的值后会失去绑定）

【3】双向绑定：

需要使用“.sync”作为修饰词

如示例：

<div id="app"> 
  父组件： 
  <input v-model="val"><br/> 
  子组件： 
  <test :test.sync="val"></test> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      val: 1 
    }, 
    components: { 
      "test": { 
        props: ['test'], 
        template: "<input v-model='test'/>" 
      } 
    } 
  }); 
</script>

效果是无论你改哪一个的值，另外一个都会随之变动。

【4】props验证：

简单来说，当组件获取数据时，进行验证，只有符合条件的时候，才会使用之。

写法是将props变为一个对象，被验证是值是对象的key，验证条件是和key对应的value。

例如：

props: { 
  test: { 
    twoWay: true 
  } 
},

验证test这个变量是不是双向绑定，如果不是，则报错。（注意，这个不能用于验证单向绑定）。

示例代码如下：

<div id="app"> 
  父组件： 
  <input v-model="val"><br/> 
  子组件： 
  <test :test="val"></test> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      val: 1 
    }, 
    components:{ 
      test:{ 
        props: { 
          test: { 
            twoWay: true 
          } 
        }, 
        template: "<input v-model='test'/>" 
      } 
    } 
  }); 
</script>

更多验证类型请查看官方教程：http://cn.vuejs.org/guide/components.html#Prop__u9A8C_u8BC1

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Vue中图片上传组件封装-antd的a-upload二次封装的实例

    Vue中图片上传组件封装-antd的a-upload二次封装的实例

    这篇文章主要介绍了Vue中图片上传组件封装-antd的a-upload二次封装的实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • 详解Vue.directive 自定义指令

    详解Vue.directive 自定义指令

    这篇文章主要介绍了Vue.directive 自定义指令，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • Vue 组件事件触发和监听实现源码解析

    Vue 组件事件触发和监听实现源码解析

    这篇文章主要为大家介绍了Vue 组件事件触发和监听实现源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • vue中js实现点击复制文本到剪贴板的3种方案

    vue中js实现点击复制文本到剪贴板的3种方案

    今天遇到一个复制粘贴的需求,研究之后发现太简单了,这篇文章主要给大家介绍了关于vue中js实现点击复制文本到剪贴板的3种方案,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • VUE+Element UI实现简单的表格行内编辑效果的示例的代码

    VUE+Element UI实现简单的表格行内编辑效果的示例的代码

    这篇文章主要介绍了VUE+Element UI实现简单的表格行内编辑效果的示例的代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • Vue解决echart在element的tab切换时显示不正确问题

    Vue解决echart在element的tab切换时显示不正确问题

    这篇文章主要介绍了Vue解决echart在element的tab切换时显示不正确问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 基于mpvue的小程序项目搭建的步骤

    基于mpvue的小程序项目搭建的步骤

    mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架，这篇文章主要介绍了基于mpvue的小程序项目搭建的步骤，非常具有实用价值，需要的朋友可以参考下
    2018-05-05
  • Vue中实现v-for循环遍历图片的方法

    Vue中实现v-for循环遍历图片的方法

    这篇文章主要介绍了Vue中实现v-for循环遍历图片的方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • 实例详解vue.js浅度监听和深度监听及watch用法

    实例详解vue.js浅度监听和深度监听及watch用法

    这篇文章主要介绍了vue.js浅度监听和深度监听及watch用法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-08-08
  • Vue如何实现组件的源码解析

    Vue如何实现组件的源码解析

    本篇文章主要介绍了Vue如何实现组件的源码解析，组件继承分为两大类，全局组件和局部组件，有兴趣的可以了解一下
    2017-06-06

最新评论