更多操作-列表文章 (一) -组件准备-popup 弹出层组件 & 父子传值-props 把数据传给子组件-$emit 触发父组件的自定义事件

更多操作-组件准备

• 使用 popup 弹出层组件 https://youzan.github.io/vant/#/zh-CN/popup

  1 点击遮罩层周围 popup组件实现会关闭

  2 关闭时会触发自身布尔值的改变，从而触发input事件

  3 input事件改变的值 又会触发绑定的v-model="showMoreAction"的值改变

  4 达到修改弹出框的效果

• 封装在 src/home/components/more-action.vue 组件下

<template>
    //1、父组件可以使用 props 把数据传给子组件。
    //2、子组件可以使用 $emit 触发父组件的自定义事件。
             // vm.$emit( event, arg ) //触发当前实例上的事件
              // vm.$on( event, fn );//监听event事件后运行 fn； 
  <van-popup :value="value" @input="$emit('input',$event)" @open="isReport=false">
  //判断两个单元格的显示和隐藏
    <van-cell-group v-if="!isReport">
      <van-cell>不感兴趣</van-cell>
       //判断两个弹出层的显示和隐藏
      <van-cell is-link @click="isReport=true">反馈垃圾内容</van-cell>
      <van-cell>拉黑作者</van-cell>
    </van-cell-group>
    <van-cell-group v-else>
      <van-cell icon="arrow-left" @click="isReport=false">返回</van-cell>
      <van-cell>侵权</van-cell>
      <van-cell>色情</van-cell>
      <van-cell>暴力</van-cell>
      <van-cell>低俗</van-cell>
      <van-cell>不适</van-cell>
      <van-cell>错误</van-cell>
      <van-cell>其他</van-cell>
    </van-cell-group>
  </van-popup>
</template>

<script>
export default {
  name: 'more-action',
    //子组件接受父组件home传过来的值
  props: {
    value: {
      type: Boolean,  //值的类型
      default: false  //默认值
    }
  },
  data () {
    return {
      isReport: false
    }
  }
}
</script>

<style scoped lang='less'>
.van-popup {
  width: 80%;
  border-radius: 4px;
}
</style>

• 登录后才可使用

  src/vies/home/index.vue中的script里导入子组件

import MoreAction from './components/more-action'

src/vies/home/index.vue中的export defort里

components: { MoreAction },  //注册子组件

src/vies/home/index.vue中的div里 更多操作设置

<more-action v-if="user.token" v-model="showMoreAction"></more-action>   //使用组件

显示隐藏 默认值是false-隐藏

src/vies/home/index.vue中的div里

<span v-if="user.token" class="close" @click.stop="showMoreAction=true"><van-icon name="cross"></van-icon></span>