28 组合事件配合 v-modle 使用

子级元素发生改变,父级元素及时做出相应的响应
1.首先回顾 v-modle, 表单的语句,实时或者延时(.lazy)获得用户输入的信息
2. 侦听器 watch ,实时响应然后做出相关操作

    <h3>响应组件</h3>
    <Search @Search="myAnser" />
   
    响应:{{ anser }}
</template>

<script>
import Search from './Search.vue';
export default {
    data() {
        return {
            anser: ""
        }
    },
    methods: {
        myAnser(search) {
            this.anser = search
        }
    },
    components: {
        Search,
    },
}
</script>
<template>
    搜索:
    <input type="text" v-model="search">
    <br>
</template>

<script>
export default{
    data() {
        return {
            search: ""
        }
    },
    watch: {
        search(newValue, oldValue) {
            this.$emit("Search",newValue)
        }
    },
}
</script>
posted @   被占用的小海海  阅读(6)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?
点击右上角即可分享
微信分享提示