Vue3
父組件
<template>
<div class="container">
<SideInput v-model:inputValue="inputValue"></SideInput>
{{ inputValue }}
</div>
</template>
<script setup>
import SideInput from "./side-input.vue";
import { ref } from "vue";
const inputValue = ref("1");
</script>
<style lang="stylus" scoped>
.container
color: #000
text-align: center
padding-top: 100px
</style>
子組件
<template>
<div class="box">
<input type="text" v-model="inputValue" @input="isInput" />
</div>
</template>
<script setup>
import { ref, defineProps, defineEmits } from "vue";
const props = defineProps({
inputValue: {
type: String,
required: "",
},
});
const emit = defineEmits(["update:inputValue"]);
const isInput = (e) => {
emit("update:inputValue",e.target.value);
};</script>
<style lang="stylus" scoped>
.box{
font-size 20px
color #000
}
</style>
Vue2
父組件
<template>
<div>
<Isinput v-model="inputDate"></Isinput>
{{ inputDate }}
</div>
</template>
<script>
import Isinput from "./isinput.vue";
export default {
components: { Isinput },
data() {
return {
inputDate: "989989",
};
},
};
</script>
子組件
<template>
<div>
<input type="text" v-model="inputValue" @input="change_" />
</div>
</template>
<script>
export default {
props: {
value: { type: String },
},
data() {
return {
inputValue: this.value,
};
},
mounted() {
console.log(this.value);
},
methods: {
change_(e) {
this.$emit("input", e.target.value);
},
},
};
</script>
