vue -- 异步组件的引用

父组件

<template>
  <div id="app">
    我是父页面<br />
    点击按钮我就从500变成了800<br />
    {
    
    {
    
     width }}
    <hr />
    <HelloWorld1 :width="width" @myChange="dochange" />
  </div>
</template>
<script>
// import HelloWorld1 from "./HelloWorld1";
const HelloWorld1 = () => import("./HelloWorld1");

export default {
    
    
  name: "App",
  data() {
    
    
    return {
    
    
      width: 500,
    };
  },
  methods: {
    
    
    dochange(val) {
    
    
      this.width = val;
    },
  },
  components: {
    
    
    HelloWorld1,
  },
};
</script>

子组件

<template>
  <div>
    我是子页面<br>
    <button @click="dochange()">ahahha</button>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    };
  },
  methods: {
    
    
    dochange() {
    
    
      this.$emit("myChange", 800);
    },
  },
};
</script>