【Vue.js 牛刀小试】：第九章 - 组件基础再探（data、props）

系列目录地址

• 1、基础知识概览
  • 第一章 - 一些基础概念（posted at 2018-10-31）
  • 第二章 - 常见的指令的使用（posted at 2018-11-01）
  • 第三章 - 事件修饰符的使用（posted at 2018-11-02）
  • 第四章 - 页面元素样式的设定（posted at 2018-11-05）
  • 第五章 - 计算属性与监听器（posted at 2018-11-08）
  • 第六章 - 按键修饰符的使用（posted at 2018-11-15）
  • 第七章 - Vue 实例的生命周期（posted at 2018-12-13）
• 2、深刻了解 Vue
  • 第八章 - 组件的基础知识（posted at 2019-01-03）
  • 第九章 - 组件基础再探（data、props）（posted at 2019-03-09）

前言

        在上一章的学习中，咱们学习了 Vue 中组件的基础知识，知道了什么是组件，以及如何建立一个全局/局部组件。不知道你是否记得，在上一章中，咱们提到组件是一个能够复用的 Vue 实例，它与 Vue 实例也只是拥有些许的差别。本章，咱们将继续学习组件的相关基础知识，了解 Vue 的组件中的 data、prop 选项的使用。

        仓储地址：Chapter02-Bronze Component Advance

干货合集

        1、 组件中的 data 选项

        当一个 Vue 实例被建立以后，实例中的 data 选项的属性值就与页面的视图作了一个“绑定”，当咱们修改 data 中的属性值时，视图就会产生“响应”，同时，页面上使用到属性值的地方也会同步更新。那么，组件做为一个特殊的 Vue 实例，对于 data 选项的使用上是否是和在 Vue 实例中的使用方式相同呢。

        首先，咱们仍是先建立一个全局组件，按照 Vue 实例中使用 data 选项的使用方法，将 data 选项添加到组件的定义中，同时，使用插值表达式在页面中显示出属性值，示例代码以下。

<div id="app">
    <tmpl></tmpl>
</div>

<template id="tmpl">
    <div>
        <h3>这是全局组件，啊啊啊啊啊啊</h3>
        <h4>{{name}}</h4>
    </div>
</template>

<script> Vue.component('tmpl', { template: '#tmpl', data: { name: 'zhangsan' } }); var vm = new Vue({ el: '#app', data: {} }); </script>
复制代码

        运行咱们的代码，发现页面上并无显示出数据，看下控制台，嗯，报错了。咱们一条条的看报错信息。

        第一条报错信息，在建立组件实例中的 data 选项时，返回的应该是一个实例对象的方法。什么意思呢？回想一下咱们在建立 Vue 实例时添加 data 选项，咱们建立的是一个 data 对象，而根据控制台的报错信息提示，当咱们在组件中使用 data 选项时，咱们须要返回包含实例对象的方法，咱们能够按照这个提示修改试试。

<script> Vue.component('tmpl', { template: '#tmpl', data: function () { return { name: 'zhangsan' } } }); </script>
复制代码

        能够看到，在组件的 data 选项中，咱们将 data 选项定义成一个方法，并在这个方法中返回了一个对象实例，此时，刷新页面，能够看到两条错误信息已经都不见了，页面也已经能够正常显示出数据。

        为何会这样呢，查看 Vue 的官方文档后，咱们能够找到这样一句解释：一个组件的 data 选项必须是一个函数，所以每一个实例能够维护一份被返回对象的独立的拷贝。

        返回对象的独立的拷贝，再联系上面报错信息提到的，在方法中返回对象实例，是否是说，当咱们在方法中返回的是一个定义好的对象，会出问题呢？

        咱们来继续试试。这里，咱们将在 data 选项中返回的对象改为在外部定义，同时，屡次调用这个组件，完整的示例代码以下。

<div id="app">
    <counter></counter>
    <hr />
    <counter></counter>
</div>

<template id="counter">
    <div>
        <button @click="add"> Add </button>
        <h3>count：{{count}}</h3>
    </div>
</template>

<script> var dataObj = { count: 0 } Vue.component('counter', { template: '#counter', data: function () { return dataObj }, methods: { add() { dataObj.count++ } }, }) var vm = new Vue({ el: '#app', data: {} }); </script>
复制代码

        能够看到，由于咱们在 data 中返回的对象并非一个新的对象实例，当咱们修改返回对象中的属性值时，全部使用到当前组件的地方都会发生变动，这无疑是没法接受的。所以，为了不这一状况，当咱们须要在建立组件时须要添加 data 选项，咱们须要在 data 方法中返回对象实例，而不是一个已经定义好的对象。

        2、 组件中的 props 选项

        组件的 Props 选项是咱们能够在组件上注册的一些自定义特性，当咱们将一个值传递给一个 props 选项中的特性时，那个 prop 特性就变成了组件实例的一个属性，这时候，咱们固然就能够获取到这个值了，所以，组件中的 props 常常用于将咱们的父组件值传递到子组件或是将 Vue 实例中的属性值传递到组件中使用。

        在父组件/Vue实例引用子组件的时候，经过属性绑定的方式（v-bind），将须要传递给子组件的数据进行传递，从而在子组件内部，经过绑定的属性值获取到父组件/Vue实例的数据。

        例如，在下面的代码中，我在 Vue 实例中定义了一个局部组件，将实例的 title 属性绑定到组件的 parenttitle 属性上，同时，将 parenttitle 属性赋值给组件的 content 属性，从下面的代码中不难看出，咱们但愿的是能够实时获取到父组件的 title 属性值。

        PS：这里和以前定义组件名称同样，由于在 HTML 中，对于大小写是不敏感的，所以，若是这里你采用了 camelCase (驼峰命名法) ，在使用时，依然须要将属性名称用其等价的 kebab-case (短横线分隔命名) 来指明。

<div id="app">
    <h4>
        请输入须要传递给子组件的值：<input type="text" v-model="title" />
    </h4>
    <child-node v-bind:parenttitle="title"></child-node>
</div>

<template id="child">
    <div>
        <h4>Vue 实例中的属性值为：{{content}}</h4>
    </div>
</template>

<script> var vm = new Vue({ el: '#app', data: { title: '' }, components: { 'childNode': { template: '#child', props: ['parenttitle'], data() { return { content: this.parenttitle } } } }, }); </script>
复制代码

        能够看到，结果彷佛和咱们想的不同，虽然能够在绑定的 parenttitle 属性上实时获取到 Vue 实例的属性值，但是，这里却没法同步更新组件的 content 属性。仔细分析下能够咱们就不难看出，组件的 data 选项中的 content 属性是一个 String 类型的变量，也就是 js 中的基本数据类型，在建立时就已经将数据值写入到内存栈中，以后与初始赋值的数据就没有任何的关系，所以，后面对于 Vue 实例的 title 属性的任何变动，都不会引发对于实例 content 属性的变化。

        所以，若是咱们想完成最开始的需求的话，有两种可行的解决办法：

        一、将 Vue 实例中的 title 属性改成一个对象，输入的值做为对象中的一个属性，所以，咱们在实例中绑定的 parenttitle 也将为一个对象。由于 js 中的对象为引用类型，赋值时，是将存储数据的地址进行拷贝，所以，title 对象和 parenttitle 对象将指向同一地址，这时，任何对于 title 对象的属性值的修改，都会引发 parenttitle 对象中属性值得改变。

        二、采起 watch 监听 parenttitle 的方式来同步更新实例的 content 属性。

        这里，我采用第二种方式，使用 watch 监听器来同步变动组件中的 content 属性值，修改代码以下。

<script> var vm = new Vue({ el: '#app', data: { title: '' }, components: { 'childNode': { template: '#child', props: ['parenttitle'], data() { return { content: this.parenttitle } }, watch: { parenttitle() { this.content = this.parenttitle } }, } }, }); </script>
复制代码

        既然能够将 Vue 实例的数据传递到子组件中进行使用，那么，咱们是否是能够在子组件进行修改绑定的属性值，从而影响到 Vue 实例呢？咱们来继续尝试。

        在上面的实例代码的基础上，咱们为子组件的 h4 标签添加一个点击事件 change，经过 change 事件，咱们来修改绑定的属性值 parenttitle，看看会不会形成对于 Vue 实例中的 title 属性的影响。

<div id="app">
    <h4>
        请输入须要传递给子组件的值：<input type="text" v-model="title" />
    </h4>
    <child-node v-bind:parenttitle="title"></child-node>
</div>

<template id="child">
    <div>
        <h4 @click="change">Vue 实例中的属性值为：{{content}}</h4>
    </div>
</template>

<script> var vm = new Vue({ el: '#app', data: { title: '' }, components: { 'childNode': { template: '#child', props: ['parenttitle'], data() { return { content: this.parenttitle } }, watch: { parenttitle() { this.content = this.parenttitle } }, methods: { change() { this.parenttitle = '9999999999999' } } } }, }); </script>
复制代码

        能够看到，咱们虽然修改了组件的 parenttitle 属性值，却没有影响到 Vue 实例中的 title 属性，因此咱们能够得出，全部的 prop 都使得其父子 prop 之间造成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，可是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而致使你的应用的数据流向难以理解。

总结

        本章，主要是介绍了咱们如何在组件中使用 data 选项和 props 选项，以及在使用过程当中一些与 Vue 实例中使用方式不一样的地方，同时，介绍了如何将父组件中的属性值传递到子组件中。既然父组件能够将属性值传递到子组件中，毫无疑问，咱们也能够将子组件的属性传递到父组件中，父子组件之间进行属性传递的方式，我将放在下一章中进行介绍。

参考

        一、Vue.js——60分钟组件快速入门（上篇）

        二、认识Vue组件

        三、Vue 2.0学习笔记：组件的使用

        四、初学vue2.0-组件-文档理解笔记v1.0

        五、Vue组件选项props

占坑

        做者：墨墨墨墨小宇
        我的简介：96年生人，出生于安徽某四线城市，毕业于Top 10000000 院校。.NET程序员，枪手死忠，喵星人。于2016年12月开始.NET程序员生涯，微软.NET技术的坚决坚持者，立志成为云养猫的少年中面向谷歌编程最厉害的.NET程序员。
        我的博客：yuiter.com
        博客园博客：www.cnblogs.com/danvic712