vue3入门_demo

hemeiwolong / 2023-09-03 / 原文

新建项目参考：Vue vscode 创建 vue 项目流程【超详细】_vue vscode 创建 vue 项目流程【超详细】_怎么用vscode写vue_一颗不甘坠落的流_一颗不甘坠落的流星的博客-CSDN博客

demo参考：28_组件事件配合v-model使用_哔哩哔哩_bilibili

vue3创建项目时还可用命令：npm init vue@latest

项目结构：

App.vue：把多余的部分删除后如下

<template>
  <Main></Main>
</template>

<script>
  import Main from "./components/Main.vue"

  export default {
    components: {
      Main
    }
  }
</script>

main.js：把原有引入的样式删除后如下

// 可以把原有的样式删除
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

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 运行