cssjshtml vue.js 子向父属性绑定

<template>
  <div>
        <i v-if="!isCollapse" class="el-icon-d-arrow-left" @click="asidechange()"></i>
        <i v-if="isCollapse" class="el-icon-d-arrow-right" @click="asidechange()"></i>
  </div>
</template>
  export default {

    data() {
      return {
        isCollapse: false
      }
    },
    methods: {
      asidechange() {
        this.isCollapse = !this.isCollapse
        this.$emit('changeMargin', this.isCollapse)
      }
    }
  }

<template>
  <el-container>
    <el-header>
      <Header></Header>
    </el-header>
    <el-container>
      <el-aside width="180px">
        <Aside @changeMargin="changeMargin($event)"></Aside>
      </el-aside>

      <el-main :class="{ margin: isMargin }">
        <router-view></router-view>

      </el-main>
    </el-container>
  </el-container>

</template>

<script>
  import Header from '@/views/home/Header.vue'
  import Aside from '@/views/home/Aside.vue'

  export default {
    name: "Index",
    data() {
      return {
        isMargin: false
      }
    },
    components: {
      Header,
      Aside
    },
    methods: {
      changeMargin(isCollapse) {
        this.isMargin = isCollapse
        console.log(isCollapse)
      }
    }
  }
</script>