创建公共的子组件vue页面  unfold.vue

<template>
  <div>
    <div v-on:click="changeFoldState()" style="margin-left: 89%;margin-top: 1%">
      <span style="color: #54a6de">{{brandFold?' 收起∧':' 展开∨ '}}</span>
    </div>

  </div>
</template>
<script>
  export default {
    data () {
      return {
        childUnfold: false
      }
    },

    
    // 接受父组件的值
    props: {
      brandFold: Boolean,
      required: true
    },
    methods: {
      changeFoldState () {

        // childByValue是在父组件on监听的方法
        // 第二个参数this.childValue是需要传的值
        this.$emit('childByValue', this.childUnfold)
      }
    },
    watch:{
      childUnfold(curVal,oldVal){
     alert(curVal+"---"+oldVal);
        this.brandFold = !this.brandFold;
      }
    }
  }
</script>

<style scoped>
  span{
    width: 30px;
    height: 17px;
    border:1px solid rgba(0,0,0,0.1);
    cursor:pointer;
  }
</style>

父组件页面引用

引用与注册组件

定义属性

定义子组件触发附件的方法