Vue3 中 的props和v-model

假设 子组件需要接受父组件的参数（非常常见）

下面的例子中，该参数定义为visible，是个布尔值

子 组件中定义了props 形如

<template>
        <div > 一些文本 {{visible}} </div>
</template>

<script lang="ts">
export default {
props: {
    visible: {  type: Boolean, default: false, }         // 定义了props
    }           }
 <script >

父 组件

<template>
<子 :visible="x" />   //使用子组件-->传入 子 想要的props 也就是X 
</template>

<script lang="ts">

import 子 from "./lib/子.vue"
import { ref } from 'vue';

export default {     components: { 子 },        // 声明 使用 子组件
setup() {
    const x = ref(false);            //定义了数据X 
    return {x} }      }
<script >

因为父组件中使用子组件时声明了 :visible="X"

子组件拿到数据X

此时单向数据流

---

让我们利用这个数据做点事情-->决定子组件显示的问题

子template外面再套个template并使用v-if    //Vue3 可以多个根元素

<template v-if="visible">
    <template>
        <div > 一些文本{{visible}} </div>
    </template>
</template>

这个时候再进一步，我想改变这个X

我要在父元素中添加按钮 ，toggle一下这个visible-->控制子的显示

依旧是单向数据流

父里加个button 加个事件 使用toggle函数
<template>
    <子 :visible="x" />
    <button  @click='toggle' />   ///新加的
</template>


export default {     
setup() {
  const x = ref(false);  
  
   const toggle = () => { x.value = !x.value; };      ///新加的
   
   return {x}   } }
<script >

最终在父组件实现了开关

子根据父传入的props(x)改变--> 父里可以改x -->子响应的改变

---

再前进一步！ 我要实现双向影响

要在子里面-->点击自己就关闭自己（非常常见）

但是不能改外面的props (子通知父-->父去改)

子组件使用 emit 触发父组件的自定义事件。

子
<template v-if="visible">
    <template>
        <div > 一些文本{{visible}} </div>
        <div @click="关闭我自己" > 一些一些文本{{visible}} </div>    // 加监听和对应方法
    </template>
</template>

<script lang="ts">
export default {
props: {
    visible: {  type: Boolean, default: false, }         
    },   
    
setup(props, context) {
   const 关闭我自己 = () => {
   
   context.emit('update:visible', false)   } // 方法写在这

   return {关闭我自己}  
    }
 <script >

父

父里加个button 加个事件 使用toggle函数
<template>
    <子 :visible="x"    @update:visible="x = $event"  />                     ///新加的
    <button  @click='toggle' />  
</template>

<script lang="ts" >
export default {     
setup() {
  const x = ref(false);  
  
   const toggle = () => { x.value = !x.value; };  
   
   return {x}   } }
</script >

技术总结

子 “关闭我自己”调用了

context.emit('update:visible', false)   //传给父事件名：值

父监听

 <子:visible="x"    @update:visible="x = $event"  />   //监听那个事件并且获取那个值-->$event
 v-mdodel简写
 <子  v-mdodel:visible="x" /> 

v-mdodel就是语法糖 但是来源要清楚