Vue3-实现父组件向子组件传值

本篇如果有新认识，会持续更新

Vue3中，在一个标签里可以配置各种属性

这里我们先会将一些使用，如果需要结论，直接翻到底部即可。

比如,当我们有两个.vue文件，一个是App.vue，一个是Person.vue，

其中App.vue是父组件，Person.vue是子组件

在App.vue的脚本中将Person.vue引入

import Person from 'Person.vue所在路径'

在App.vue的模板中，写了

<template>

        <Person/>

</template>

当我们需要从App.vue中传值到Person.vue中时

可以通过这个组件标签<Person/>

<Person a="笑一笑"/>

就是往Person.vue中传入了一个名为a字符串

相这样的格式如       

名="值"

就是传递了一个字符串

我们可以在Person.vue的脚本中用

defineProps([])来接

如：define.Props(['a'])

接到传来的变量后就可以使用了

比如在模板中写<h2>{{ a }}</h2>

呈现出来的效果就是在页面上出现一段h2式儿的文字：笑一笑

但是，会发现，如果要在脚本中使用a，其值却会是undefined,

其实defineProps()会返回一个reactive式儿的对象，里面放着的是所有接收来的值

需要用一个变量来接如：let x =defineProps(['a'])

就可以通过变量来使用其中数据了。

但通常用defineProps接到的变量还是用到模板上， 

如果要传递App.vue中的某个变量、对象或方法到元素的属性DOM属性或组件的prop上。

如果要传递变量、对象或者方法则可以在

<Person :a="变量、对象或方法名"/>

对，就是加了一个':'

这样子组件Person中就可以操作这个a了

这个':'其实是v-bind:的简写形式

实现的是"单向绑定"

也就是只能由数据端的改变影响页面呈现，不能由页面中对应数据的改变影响到数据端。

双向绑定就是v-model

v-model这个一般是表单中用到的。

说到表单，

可以提到三种传值的方式

<inpnut value=""></input>

<input :value=""></input>

<inpuit v-model=""></input>

第一个类似于之前讲到的 变量名:"常量"

第二个则是v-bind指令,让脚本中变量的值呈现到表单中

第三个是v-model指令，让脚本中变量的值能呈现到页面中也可以通过页面改变变量的值。

还有一种特殊的

在脚本中定义一个如：let x = ref()

将其放到模板中的标签中

ref="x"

变量x就用来装该标签对应的DOM元素，如果放到组件标签中，则是装组件的实例，但是需要在组件中写一个defineExpose({数据的名称})才可以

总地来说，就是

如何把父组件中的东西传到子组件中去

传一个字符串常量

<Person 名 = "常量"/>

传一个变量、方法、方法名

<Person :名="变量、对象、方法名" />

定义一个ref()式儿的变量

let x = ref()

<Person ref="x">

x装的是Person.vue组件的实例

但只能看到iPerson.vue中写在

defineExpose({})里的数据

只是联系表单又说了一点东西

<inpnut value=""></input>

<input :value=""></input>

<inpuit v-model=""></input>

第一个类似于之前讲到的 变量名:"常量"

第二个则是v-bind指令,让脚本中变量的值呈现到表单中

第三个是v-model指令，让脚本中变量的值能呈现到页面中也可以通过页面改变变量的值

还注意，不要把computed()涉及的只读，可读可写，与单双向绑定的实现混淆了。

computed(

        return{ ... }

)

则其中的计算属性是可读的，可由参与计算的其他属性更改

computed(

        get(){

                return...

        }       

        set(参数){

                逻辑        

        }

)

这样的式可读又可写的~

如又错误，请纠正，十分感谢~