vue组件基本案例

工作中要做一个弹出分享到各平台和收藏（取消收藏）文章的模块，因为在多个组件中需要，所以将这一部分做成一个独立的组件。

效果如下图：

1、创建组件文件

我创建了一个component文件夹，用来放多次被使用的组件文件，其中shareBox.vue为此次的分享组件。

该组件在项目中被使用在activityDetail.vue和informationDetail.vue等多个页面中。

目录结构

2、父子组件

父组件为activityDetail.vue和informationDetail.vue等调用shareBox.vue的组件

子组件为shareBox.vue被调用的组件

3、父组件调用子组件

第一步：在script块内根据自己的路径正确将子组件引入

import shareBox from '../component/shareBox.vue';

第二步：组件注册

components: {

      shareBox

},

第三步：组件调用

<shareBox

     v-bind:content="content"

     v-bind:flag="flag"

     v-bind:collectionStatus="content.collectionStatus" 

     @closeShare="bgHide"

     @collection="collection"

     @reCollection="messageBoxCofirm">

可以看到向子组件传递了3个值、定义了3个事件。

4、父组件向子组件传值，子组件接收和使用值

content：父组件传的对象，包含分享，收藏时所需文章id等文章相关信息

flag：标识，用来分别父组件，不同父组件需显示不同内容时使用，比如activityDetail.vue不需要收藏，而informationDetail.vue需要收藏

content.collectionStatus ：收藏状态变量

子组件使用prop接收值

props: ['content','flag','collectionStatus']

5、子组件调用父组件方法

点击取消按钮关闭分享模块，调用父组件因此该子组件的方法，使用$emit触发父组件方法

子组件调用：

back:function () { this.$emit('closeShare')}

父组件捕捉：

closeShare方法

bgHide为父组件内的一个隐藏子组件shareBox的方法

6、收藏 / 取消收藏

收藏 / 取消收藏需要改变父组件传递过来的收藏状态collectionStatus

由于vue中数据传递是父向子 prop 之间形成了一个单向下行绑定，父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

所以不能直接改变父组件传递过来的collectionStatus，因此需要将该值复制出一个副本myCollect

data: function () {

       return { myCollect: this.collectionStatus };

},

当改变状态时，改变副本myCollect状态

//收藏（改变收藏状态、调用父组件收藏方法）

collection:function () {

       this.myCollect = !this.myCollect;

       this.$emit('collection')

},

//取消收藏（改变收藏状态、调用父组件取消收藏方法）

reCollection:function () {

       this.myCollect = !this.myCollect;

       this.$emit('reCollection')

},