父
<template>
<div>
<img src="/vite.svg" class="logo" alt="Vite logo" />
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</div>
<HelloWorld v-model:msg='state.msg'
v-model:age="state.age"/>
<input type="text" v-model="state.msg">
</template>
<script setup>
import { reactive } from "vue";
import HelloWorld from './components/HelloWorld.vue'
const state = reactive({
msg: "vue+vite",
age:24
});
</script>
子
<template>
<h1>{{ msg }}</h1>
<van-button type="primary" @click="qingqiu">主要按钮</van-button>
<div>子组件:</div>
<input type="text" v-model="msg">
<!-- 可省略props -->
<h1>{{ msg }}</h1>
<h1>{{age}}</h1>
</template>
<script setup>
import { ref,defineEmits } from 'vue'
const props = defineProps({
msg: {
type: String,
default: "",
},
age: {
type: Number,
default: 0,
},
});
const emit = defineEmits(["msg", "age"]);
</script>
网友评论