028.Vue3入门,子页面通过v-model,把数据实时传给父页面
1、App.vue代码:
<template> <Father/> </template> <script setup> import Father from './view/Father.vue' </script> <style> </style>
2、Father.vue代码:
<template> <h3>父页面</h3> <p>搜索内容为: {{ search }}</p> <Child @searchEvent="getSerch"/> </template> <script> import Child from './Child.vue'; export default { data() { return { search: '' } }, components: { Child }, methods: { getSerch(data) { console.log('子页面传过来:', data); this.search = data; } } } </script>
3、Child代码如下:
<template> <h3>子页面</h3> 搜索:<input type="text" v-model="searchText"> </template> <script> export default { emits: ['searchEvent'], data() { return { searchText: '' } }, //监听器 watch: { searchText(newValue, oldValue) { this.$emit('searchEvent', newValue) } }, } </script>
4、效果如下: