美文网首页
v-module 父传子

v-module 父传子

作者: 糖醋里脊120625 | 来源:发表于2022-11-11 15:53 被阅读0次

<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>

相关文章