【Vue3基础】组合事件配合v-model、watch的使用

太过爱你忘了你带给我的痛 2023-10-14 04:51 9阅读 0赞

**一、需求描述**

在组合事件中，实现在子事件输入框中输入使父事件实时显示输入内容

**二、代码参考**

1、关注文件，在App中嵌套Main，在Main中嵌套searchDemo

![0caf4c8bd90544348ad11f55a51f5190.png][]

2、Main.vue文件

<template>
       <h3>Main页面</h3>
       <p>搜索内容为：{
       { search }}</p>
       <searchDemo @searchEvent="getSearch" />
    </template>
    <script>
    import searchDemo from "./searchDemo.vue"
    export default {
        data(){
            return{
                search:""
            }
        },
         components: { 
            searchDemo
        },
        methods:{
            getSearch(data){
                this.search=data;
        }
    }
    }
    </script>

3、searchDemo.vue文件

<template>
       输入：<input type="text" v-model="search">
    </template>
    <script>
    export default {
        data() {
            return{
                search:""
            }
        },
        watch:{
            search(newValue,oldValue){
                this.$emit("searchEvent",newValue)
            }
        }
    }
    </script>

4、App.vue文件

<template>
      <Main  />
    </template>
    <script>
    import Main from "./components/Main.vue";
    export default{
      components: { 
        Main
      }
    }
    </script>

5、浏览器运行效果

![8109806e3c2949d3b154ec39eedad891.png][]

6、期间遇到的问题

\[plugin:vite:import-analysis\] Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.

![9d07ab4c00764cb3ab6925911c829a04.png][]

网友分享的解决方法（见教程链接2）：

![8d1d847dc09b4140be19a309f2dcecca.png][]

但是自己试过，刷新浏览器仍旧报错。仔细查看代码，发现原searchDemo.vue文件中代码自己多敲了个括号，如下图。将括号删除后能正常运行，所以存在不同的原因导致相同的报错结果这种现象，以后要更仔细些才好！

![6916acf5c4914231addb9760fc2c2a8a.png][]

**三、教程链接**

1、视频[https://www.bilibili.com/video/BV1Rs4y127j8?p=28&vd\_source=841fee104972680a6cac4dbdbf144b50][https_www.bilibili.com_video_BV1Rs4y127j8_p_28_vd_source_841fee104972680a6cac4dbdbf144b50]

2、关于 解决方法[https://blog.csdn.net/u011024243/article/details/126058721][https_blog.csdn.net_u011024243_article_details_126058721]

[0caf4c8bd90544348ad11f55a51f5190.png]: https://img-blog.csdnimg.cn/0caf4c8bd90544348ad11f55a51f5190.png
[8109806e3c2949d3b154ec39eedad891.png]: https://img-blog.csdnimg.cn/8109806e3c2949d3b154ec39eedad891.png
[9d07ab4c00764cb3ab6925911c829a04.png]: https://img-blog.csdnimg.cn/9d07ab4c00764cb3ab6925911c829a04.png
[8d1d847dc09b4140be19a309f2dcecca.png]: https://img-blog.csdnimg.cn/8d1d847dc09b4140be19a309f2dcecca.png
[6916acf5c4914231addb9760fc2c2a8a.png]: https://img-blog.csdnimg.cn/6916acf5c4914231addb9760fc2c2a8a.png
[https_www.bilibili.com_video_BV1Rs4y127j8_p_28_vd_source_841fee104972680a6cac4dbdbf144b50]: https://www.bilibili.com/video/BV1Rs4y127j8?p=28&vd_source=841fee104972680a6cac4dbdbf144b50
[https_blog.csdn.net_u011024243_article_details_126058721]: https://blog.csdn.net/u011024243/article/details/126058721