update component

skills/vue/vue3-demo/src/components/MyComponent.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <p> {{ modelValue }} </p>
+    <input type="text" @input="handleInput" >
+  </div>
+</template>
+
+<script setup>
+
+// 组件属性
+const { modelValue } =  defineProps({
+  modelValue: {
+    type: String,
+    required: true,
+    default: '-'
+  }
+})
+
+// 组件事件
+const emit = defineEmits(['update:modelValue'])
+
+// 组件内不能修改属性, 因此我们需要生命另外一个变量去获取他的值
+const handleInput = (e) => {
+  emit('update:modelValue', e.target.value)
+}
+</script>
+
+<style lang="css" scoped>
+
+</style>

skills/vue/vue3-demo/src/main.js

@@ -8,4 +8,6 @@ const app = createApp(App)
 
 app.use(router)
 
+
+
 app.mount('#app')

skills/vue/vue3-demo/src/views/AboutView.vue

@@ -47,6 +47,10 @@
       </li>
     </ul>
 
+
+    <!-- 自定义组件 -->
+    <MyComponent v-model="my_message" />
+
   </div>
 </template>
 
@@ -65,6 +69,8 @@
 <script setup>
 import { computed, nextTick, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';
 
+import MyComponent from '@/components/MyComponent.vue';
+
 // 声明响应式变量, reactive, ref
 // {value: 'my vue3 demo'}
 var name = ref('my vue3 demo')
@@ -161,4 +167,7 @@ const inputValue = ref('')
 // 响应式列表
 const items = ref([{ message: 'msg1' }, { message: 'msg2' }, { message: 'msg3' }])
 
+
+// 组件属性 动态绑定
+const my_message = ref('go19')
 </script>