Vue.js入门教程-组件数据传递

一、组件基础

1.1 基本示例

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

(1)组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用

<div id="components-demo">
  <button-counter></button-counter>
</div>
new Vue({ 
    el: '#components-demo' 
})

(2)因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项

1.2 组件复用

(1)你可以将组件进行任意次数的复用。

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

(2)注意当点击按钮时,每个组件都会各自独立维护它的 count。因为你每用一次组件,就会有一个它的新实例被创建。

1.3 data 必须是函数

(1)当我们定义这个 <button-counter> 组件时,你可能会发现它的 data 并不是像这样直接提供一个对象

data: {
  count: 0
}

(2)取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。

data: function () {
  return {
    count: 0
  }
}

(3)如果 Vue 没有这条规则,点击一个按钮就可能会像如下代码一样影响到其它所有实例

二、组件使用

2.1 增强模块化

(1)在 Vue 项目中使用组件,目的一般就是 提高代码复用率,增强模块化,从而降低开发成本。

(2)我们在 Vue 中使用组合组件,也就是A组件中包含了B组件。而组件与组件之间的相互使用避免不了数据之间的传递。那么 Vue 中组件的数据是如何传递的呢?

2.2 数据传递

(1)首先要说明,组件数据传递不同于Vue全局的数据传递,组件实例的数据作用域是孤立的

(2)这里的孤立并不仅仅在组件内独立,而且是指上下层之间的数据隔离,即不能在子组件的模板内直接引用父组件的数据。如果要把数据从父组件传递到子组件,就需要使用props属性。这是父组件用来传递数据的一个自定义属性

三、组件数据流向

3.1 父子组件关系

(1)在Vue的官方文档中提到,在Vue中,父子组件的关系prop向下传递,事件向上传递】。父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息

3.2 单向数据流

(1)常把这种数据流称之为单向数据流。prop是单向绑定的,当父组件的属性变化时,将传给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。

(2)另外,每次父组件更新时,子组件的所有prop都会更新为最新值。这意味着你不应该在子组件内部改变prop。如果你这么做了,Vue会在控制台给出警告。

四、Prop使用

4.1 基本示例

(1)首先来创建一个子组件child,并且在Vue的实例中定义了data选项。

let parent = new Vue ({
    el:"#app",
    data () {
        return {
            name: 'WEBING',
            job: 'front-end-development'
        }
    },
    components: {
        'child': {
            template: '#child',
            props: ['myName','myJob']
        }
    }
});

(2)这里直接把Vue实例 parent 当作组件child的父组件。如果我们想要使用父组件的数据,则必须先在子组件中定义props,即:props:['myName', 'myJob']。

(3)接下来定义child组件的模板

<template id="child"> 
    <div class="child"> 
        <h3>子组件child数据</h3> 
        <ul> 
            <li> 
                <label>姓名</label> 
                <span>{{ myName }}</span> 
            </li> 
            <li> 
                <label>工作</label> 
                <span>{{ myJob }}</span> 
            </li> 
        </ul> 
    </div> 
</template>

(4)将父组件parent的data通过已定义好的props属性传递给子组件。

<div id="app">
    <child :my-name="name" :my-job="job"></child>
</div>

(5)给上面的示例,添加CSS样式,最终看到的效果如下。

4.2 Prop 大小写

(1)由于HTML特性不区分大小写,在子组件定义prop时,使用了驼峰式大小写(camelCase)命名法。

(2)驼峰式大小写的prop用于特性时,需要转为短横线隔开(kebab-case)。例如,在prop中定义的myName,在用作特性时需要转换为my-name

let parent = new Vue ({
    // ...
    components: {
        'child': {
            props: ['myName','myJob'] // 在 JavaScript 中是 camelCase 的
            // ...
        }
    }
});
<!-- 在 HTML 中是 kebab-case 的 -->
<div id="app">
    <child :my-name="name" :my-job="job"></child>
</div>

(3)【注意】如果你使用字符串模板,那么这个限制就不存在了。

4.3 Prop语法

(1)在父组件使用子组件时,通过以下语法将数据传递给子组件

<child :子组件的prop="父组件数据属性"></child>

(2)【注意】:其实相当于v-bind,也就是Vue中的v-bind指令。这是属于动态绑定,让它的值被当作JavaScript表达式计算。

五、Prop绑定类型

在Vue中的prop绑定主要有①单向绑定和②双向绑定(见后续文章)

六、单向绑定

6.1 数据单向流动

(1)我们知道在 Vue 2.0 中组件的props的数据流动改为了单向流动;

(2)即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能被动接受组件外传递过来的数据,并且在组件内,不能修改由外层传来的props数据。

6.2 父组件影响子组件

<div id="app">
    <div class="parent">
        <h3>父组件Parent数据</h3>
        <ul>
            <li>
                <label>姓名</label>
                <span>{{ name }}</span>
                <input type="text" v-model="name" />
            </li>
            <li>
                <label>工作</label>
                <span>{{ job }}</span>
                <input type="text" v-model="job" />
            </li>
        </ul>
    </div>
    <child :my-name="name" :my-job="job"></child>
</div>

<template id="child">
    <div class="child">
        <h3>子组件Child数据</h3>
        <ul>
            <li>
                <label>姓名</label>
                <span>{{ myName }}</span>
                <input type="text" v-model="myName" />
            </li>
            <li>
                <label>工作</label>
                <span>{{ myJob }}</span>
                <input type="text" v-model="myJob" />
            </li>
        </ul>
    </div>
</template>
let parent = new Vue({
  el: '#app',
  data () {
    return {
      name: 'WEBING',
      job: 'FE'
    }
  },
  components: {
    'child': {
      template: '#child',
      props: ['myName', 'myJob']
    }
  }
})

(1)以下示例修改父组件中的数据

(2)从上面修改父组件数据得到的效果可以告诉我们 【修改父组件的数据将会影响子组件,子组件的数据也会对应的修改

(3)以下示例修改子组件的数据

(4)从效果中可以看出 【修改子组件数据并不会影响父组件的数据】(警告信息的处理见后续文章。)

prop默认是单向绑定 【当父组件的属性变化时,将传给子组件,但反过来不会。这是为了防止子组件无意修改了父组件的状态】

更多系列文章在GitHub地址

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

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券