父组件
<template>
<div id="app">
我是父页面<br />
点击按钮我就从500变成了800<br />
{
{
width }}
<hr />
<HelloWorld1 :width="width" @myChange="dochange" />
</div>
</template>
<script>
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>