工作中要做一个弹出分享到各平台和收藏（取消收藏）文章的模块，因为在多个组件中需要，所以将这一部分做成一个独立的组件。
效果如下图：
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')
},
网友评论