新建项目参考：Vue vscode 创建 vue 项目流程【超详细】_vue vscode 创建 vue 项目流程【超详细】_怎么用vscode写vue_一颗不甘坠落的流_一颗不甘坠落的流星的博客-CSDN博客
项目结构：
App.vue
<template>
<Main></Main>
</template>
<script>
import Main from "./components/Main.vue"
export default {
components: {
Main
}
}
</script>
Main.vue
<template>
<!-- 注意在vue中只能包含一个根元素 -->
<div>
<h3>main template</h3>
<Child @childEvent="childEventHandle"/>
<div>search content:{{ searchContent }}</div>
</div>
</template>
<script>
import Child from "./Child.vue"
export default {
data() {
return {
searchContent: ""
}
},
components: {
Child
},
methods: {
childEventHandle(date) {
this.searchContent = date
}
}
}
</script>
Child.vue
<template>
<div>
<h3>child template</h3>
<input type="text" v-model="search">
</div>
</template>
<script>
export default {
// 注意data不要写成date
data() {
return {
search: ""
}
},
watch: {
search(newVal, oldVal) {
this.$emit("childEvent", newVal)
}
}
}
</script>
在项目目录，执行npm run dev 运行
