4.通过事件向父级组件发送消息

1.在src/components/left.vue中添加

html:

<template>
<!--.其他内容..-->
<div class="theme" @click="childEvent">
    主题
</div>
<!--.其他内容..-->
</template>

js:

<script>
export default {
  name: 'left',
  data () {
    return {
        showTheme: false,
    }
  },
  methods: {
        childEvent() {
            var that = this
            //通过事件向父级发送消息($emit)
            //第一个值:是在父级上需要监听的事件,
            //第二个:值是需要传给父级的值（可不传）
            that.$emit('enlarge-text', that.showTheme)
        },
  },
}
</script>

2.在src/components/HelloWorld.vue父级组件中去监听事件

html:

<template>
  <div>
    <!--左边的组件-->
    <left v-on:enlarge-text="fatherEvent"></left>
  </div>
</template>

js

<script>
//12.07新增_引入组件
import left from './left';

export default {
  name: 'HelloWorld',
  data () {
    return {}
  },
  //12.07新增_引入组件
  components: {
    left,
  },
  methods: {
        fatherEvent(enlargeAmount) {
            var that = this 
            //enlargeAmount是传递过来的值，即上面子组件中showTheme的值
        },
  }，
}
</script>