专栏首页菜鸟计划vue组件详解(二)——使用props传递数据

vue组件详解(二)——使用props传递数据

在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递。父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是怎么工作的。

 一、基本用法

组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信。

在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象。

1.1 字符串数组:

       <div id="app4">
            <my-component4 message="数据来自父组件"></my-component4>
        </div>
Vue.component('my-component4',{
    props: ['message'],
    template: '<div>{{message}}</div>'
});

var app4 = new Vue({
    el: '#app4'
});
渲染后的结果为:
<div id= ” app4”>
  <div >来自父组件的数据</ div>
</div>

 props 中声明的数据与组件data 函数return 的数据主要区别就是props 的来自父级,而data 中的是组件自己的数据,作用域是组件本身,这两种数据都可以在模板template 及计算属性computed和方法methods 中使用。

上例的数据message 就是通过props 从父级传递过来的,在组件的自定义标签上直接写该props 的名称,如果要传递多个数据,在props 数组中添加项即可。

有时候,传递的数据并不是直接写死的,而是来自父级的动态数据,这时可以使用指令v -bind来动态绑定props 的值,当父组件的数据变化时,也会传递给子组件。

        <div id="app5">
            <input type="text" v-model="text">
            <my-component5 :my-text="text"></my-component5>
        </div>
Vue.component('my-component5',{
    props: ['myText'],
    template: '<div>{{myText}}</div>'
});

var app5 = new Vue({
    el: '#app5',
    data: {
        text: '动态传递父组件数据'
    }
});

注意的几个点:

1.如果你要直接传递数字、布尔值、数组、对象,而且不使用v-bind ,传递的仅仅是字符串。

2.如果你想把一个对象的所有属性作为 prop 进行传递,可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如,已知一个 todo 对象:

1.2 对象:

当prop 需要验证时,就需要对象写法。

一般当你的组件需要提供给别人使用时,推荐都进行数据验证,比如某个数据必须是数字类型,如果传入字符串,就会在控制台弹出警告。

        <div id="app6">
            <input type="text" v-model="number">
            <my-component6 :my-text="number"></my-component6>
        </div>
Vue.component('my-component6',{
    props: {
      'myText':{
          type: Number, //必须是数字类型的
          required: true,    //必须传值
          default: 1    //如果未定义,默认值就是1
      }
    },
    template: '<div>{{myText}}</div>'
});

var app6 = new Vue({
    el: '#app6',
    data: {
        number: 1
    }
});

验证的type 类型可以是: • String • Number • Boolean • Object • Array • Function type 也可以是一个自定义构造器,使用instanceof 检测。 当prop 验证失败时,在开发版本下会在控制台抛出一条警告。

二、单向数据流

Vue 2.x 与Vue l.x 比较大的一个改变就是, Vue2.x 通过props 传递数据是单向的了, 也就是父组件数据变化时会传递给子组件,但是反过来不行。

业务中会经常遇到两种需要改变prop 的情况,

2.1 一种是父组件传递初始值进来,子组件将它作为初始值保存起来,在自己的作用域下可以随意使用和修改。(Prop 作为初始值传入后,子组件想把它当作局部数据来用;)

这种情况可以在组件data 内再声明一个数据,引用父组件的prop ,示例代码如下:

        <div id="app7">
            <my-component7 :init-count="1"></my-component7>
        </div>
Vue.component('my-component7',{
    props: ['initCount'],
    template: '<div>{{count}}</div>',
    data: function(){
        return {
            count: this.initCount
        }
    }
});
var app7 = new Vue({
    el: '#app7'
});

组件中声明了数据count , 它在组件初始化时会获取来自父组件的initCount , 之后就与之无关了,只用维护c ount , 这样就可以避免直接操作initCount 。

2.2 prop 作为需要被转变的原始值传入。(Prop 作为原始数据传入,由子组件处理成其它数据输出。)

这种情况用计算属性就可以了, 示例代码如下:

        <div id="app8">
            <my-component8 :width="100"></my-component8>
        </div>
Vue.component('my-component8',{
    props: ['width'],
    template: '<div :style="style">组件内容</div>',
    computed: {
        style: function(){
            return {
                width: this.width+'px'
            }
        }
    }
});
var app8 = new Vue({
    el: '#app8'
});

注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue组件化开发

    1)、我们希望尽可能多的重用代码。   2)、自定义组件的方式不太容易(html、css、js)。   3)、多次使用组件可能导致冲突。   4)、Web Co...

    别先生
  • 来吧!一文彻底搞定Vue组件!

    组件是什么呢,了解组件对象的分析,Vue组件中的data属性,props传递数据的原理到底是什么。

    达达前端
  • [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

      在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由、命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 par...

    程序员宇说
  • 带你体验Vue2和Vue3开发组件的区别(二)

    主要讲了template、data、methods、Lifecyle Hooks这几个的区别,接下来我们再讲讲另外几个属性的变化。

    青年码农
  • 一个合格的中级前端工程师应该掌握的 20 个 Vue 技巧

    之前写过一篇文章,关于 Vue 属性透传的,文章中我列举了很多种方法去实现属性透传。其中包括直接设置 props,v-bind="$attrs",render ...

    GopalFeng
  • 深入理解Vue组件3大核心概念

    本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一...

    Fundebug
  • Vue组件基础--简单了解vue组件

    组件就像是提前做好的模具,使用时拿出来就行,可以重复调用,它跟普通的Vue有一样的属性:

    我不是费圆
  • 【Vue】浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了。在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“...

    啦啦啦321
  • Vue 中,如何将函数作为 props 传递给组件

    Vue 新手经常问的一个常见问题。可以将字符串、数组、数字和对象作为props传递。但是你能把一个函数当作一个props来传递吗?

    前端小智@大迁世界
  • 函数式组件完整例子 原

    之前创建的组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法。它只是一个接收参数的函数。 在下面这个例子中,我们标记组件为 functio...

    tianyawhl
  • Vue组件间通信6种方式

    组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系:

    Fundebug
  • 【Vue原理】Props - 源码版

    今天记录 Props 源码流程,哎,这东西,就算是研究过了,也真是会随着时间慢慢忘记的。

    神仙朱
  • Vue.js入门教程-组件数据传递

    (1)组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例...

    WEBING
  • Vue.js-渲染函数 & JSX 原

    Vue推荐在绝大多数情况下使用template来创建你的Html,然而在一些场景中,你真的需要JavaScript的完全编程的能力,这就是、render函数,它...

    tianyawhl
  • 06 . Vue路由简介,原理,实现及嵌套路由,动态路由,编程式导航

    基于URL的hash实现(点击菜单的时候改变URL的hash,根据hash的变化控制组件的切换)

    常见_youmen
  • Vue 进阶必学之高阶组件 HOC(保姆式教学,冲击20k必备)

    高阶组件这个概念在 React 中一度非常流行,但是在 Vue 的社区里讨论的不多,本篇文章就真正的带你来玩一个进阶的骚操作。

    ssh_晨曦时梦见兮
  • Electron + Vue跨平台桌面应用开发实战教程(三)

    我们从截图里可以看到,右侧区域主要是由标题栏和内容编辑区组成,其中标题栏的右侧还包含了一排操作按钮,在这里我们就先把这一排按钮忽略了,先把主要功能开发完毕再考虑...

    Javanx
  • 大话大前端时代(一) —— Vue 与 iOS 的组件化

    今年大前端的概念一而再再而三的被提及,那么大前端时代究竟是什么呢?大前端这个词最早是因为在阿里内部有很多前端开发人员既写前端又写 Java 的 Velocity...

    一缕殇流化隐半边冰霜
  • Vue中组件之间8中通信方式,值得收藏

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的...

    coder_koala

扫码关注云+社区

领取腾讯云代金券