[TOC]

双向绑定

1、 ref(),reactive()

2、toRef()

1. toRef() 将reactive() 里面的对象属性转换成 单独的 ref()
   例子：

  let salaryInfo=reactive({userName:'roy',salary:100})
  let userName=toRef(salaryInfo,'userName');
  let salaryInfo=toRef(salaryInfo.salary);
  ------
  let {userName,salary} = toRef(salaryInfo);

3、标签上ref属性(<input ref="name"/>)

<template>
名称：<input ref="name"  abc="aaaasdalskdfja;klsjdf;as"/>
<div ref="xyz">xyz</div>
<button @click="focus">获取输入框的值</button>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const name = ref();
const xyz = ref();
function focus() { 
  console.log(name);//ref对象
  console.log(name.value);//dom
  console.log(name.value.value);//输入框的值
  console.log(name.value.getAttribute('abc'));//标签的abc属性值
  console.log(xyz.value);//获取div元素
  console.log(xyz.value.textContent);//div元素的文本内容 
}
</script>
<style>
</style>

组件间的传递

1、 父组件获取子组件数据 defineExpose(子暴露属性方法，父调用)

重点： 子组件：defineExpose({传递的数据1，数据2 }) 父页面：

<SonX ref="自定义接受容器"></SonX> const 自定义接受容器 = ref(); 自定义接受容器.value.传递的数据1 自定义接受容器.value.数据2

子组件：son

<template>
名称：<input v-model="salaryInfo.name"   /><br/>
薪水：<input v-model="salaryInfo.salary"   /><br/>
城市：<input v-model="salaryInfo.city"   /><br/>
备注：<input v-model="memo"   />
<!-- <button @click="focus">获取输入框的值</button> -->
</template>
<script lang="ts">
  export default {
    name: 'SonX',
  }
</script>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
 const salaryInfo = reactive({
   name: '',
   salary: 0,
   city: '',
 })
 const memo = ref();

 defineExpose({
   salaryInfo,
   memo
 })
</script>
<style>
</style>

父组件：

<template>
  <SonX ref="salaryInfo"></SonX>
  <button @click="getInfo">获取输入框的值</button>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import   SonX  from './view/son.vue'
const salaryInfo = ref();
function getInfo() {
  console.log(salaryInfo.value);
  console.log(salaryInfo.value.salaryInfo.name);
  console.log(salaryInfo.value.salaryInfo.salary);
  console.log(salaryInfo.value.salaryInfo.city);
  console.log(salaryInfo.value.memo); 
}
</script>
<style>
</style>

2.子组件主动向父组件发送消息 defineEmits(子调用父方法传递数据)

defineEmits(['aA','bB']) emit('bB', data) 那么 父组件 function funb(data){.....} 这样就是子组件主动传给传给父组件消息了

例子： 父组件：

<template>
  <div>
    <h2>父组件</h2>
    <!-- 监听子组件发出的 'send-message' 事件，并调用 handleMessage 处理 -->
    <ChildComponent @send-message="handleMessage" />
    <p v-if="messageFromChild">收到子组件的消息：{{ messageFromChild }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 用于存储从子组件接收到的消息
const messageFromChild = ref('');

// 处理子组件事件的方法
function handleMessage(data) {
  messageFromChild.value = data;
  console.log('父组件接收到的数据:', data);
}
</script>

子组件：

<template>
  <div style="border:1px solid #ccc; padding:10px; margin-top:10px;">
    <h3>子组件</h3>
    <input v-model="inputText" placeholder="输入一些内容" />
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 1. 声明一个名为 'send-message' 的事件
const emit = defineEmits(['send-message']);

// 子组件内部的数据
const inputText = ref('');

// 2. 当按钮被点击时，触发 'send-message' 事件，并将 inputText 的值作为数据传递
function sendMessage() {
  emit('send-message', inputText.value);
}
</script>

3.父组件转递子组件数据 defineProps(创建子组件属性，子组件内部不能修改)

重点 子组件： <div></div><div></div> defineProps<{ "数据变量1名称":数据数据1类型, "数据变量2名称": 数据数据2类型 }>() 父组件 <子组件名称 :数据变量1名称="自定义变量1" :数据变量2名称="自定义变量2"></子组件名称> const 自定义变量1 : 数据数据1类型 = reactive(数据) const 自定义变量1 : 数据数据2类型 = ref(数据)

例子： 子组件：

<template>
<!-- 名称：<input v-model="salaryInfo.name"   /><br/>
薪水：<input v-model="salaryInfo.salary" type="number" /><br/>
城市：<input v-model="salaryInfo.city"   /><br/>
备注：<input v-model="memo"   /> -->
<!-- <button @click="focus">获取输入框的值</button> -->

名称：<div >{{salaryInfo.name}}</div>
薪水：<div >{{salaryInfo.salary}}</div>
城市：<div >{{salaryInfo.city}}</div>
备注：<div >{{memo}}</div>
</template>
<script lang="ts">
  export default {
    name: 'SonX',
  }
</script>
<script lang="ts" setup>
import type { SalaryInfo } from '@/types/Son.ts'

 defineProps<{
   "salaryInfo":SalaryInfo,
   "memo": string
 }>()
</script>
<style>
</style>

父组件：

<template>
  <SonX  :salary-info="salaryInfo" :memo="memo"></SonX>
  <button @click="getInfo">获取输入框的值</button>
</template>
<script lang="ts" setup>
import { ref,reactive } from 'vue'
import   SonX  from '@/view/SonX.vue'
import type { SalaryInfo } from '@/types/Son.ts'
const memo = ref("备注信息");


 const salaryInfo: SalaryInfo = reactive({
   name: 'xx',
   salary: 0,
   city: 'yyy',
 })
function getInfo() {
  salaryInfo.salary = salaryInfo.salary + 1000;
}
</script>
<style>
</style>