vue3父子通信+ref,toRef,toRefs使用实例

ref是什么?

1. 生成值类型的响应式数据
2. 可用于模板和reactive
3. 通过.value修改值
4. 可以获取DOM元素

<p ref=”elemRef”>{{nameRef}} -- {{state.name}}</p>

// 获取dom元素

onMounted(()=>{ console.log(elemRef.value); });

toRef是什么?

1. 针对一个响应式对象(reactive封装)的prop属性!!!
2. 创建一个ref, 具有响应式
3. 两者保持引用关系

toRefs是什么?

1. 将响应式对象(reactive封装)转换为普通对象
2. 对象的每个prop属性都是对应的ref
3. 两者保持引用关系

最佳使用方式

1. 用reactive做对象的响应式, 用ref做值类型响应式
2. 需要解构响应式对象使用toRefs(state), 只需要获取单个响应式值类型使用toRef(state, ‘xxx’);
3. ref的变量命名都用xxRef
4. 合成函数返回响应式对象时, 用toRefs(usexx这种钩子函数);

使用示例:

1. 子组件, script标签是这种写法: <script setup lang="ts">时

<script setup lang="ts">
import { ref, reactive, toRef, toRefs, defineProps } from 'vue';
// 父组件传数据 :msg="xxx"
defineProps({msg: String
});
// 子组件通知父组件使用@onSayHello="xxx", 子组件需要使用时eg: emites('onSayHello', 'hello啊啊啊啊')
interface IEmits {(e: 'onSayHello', arg1: String): void;
}
const emites = defineEmits<IEmits>();
const state = reactive({name: 'alice',age: 20,sex: '女'
});// 将reactive封装的对象, 使用toRefs获取的对象, 它可以进一步解构, 获取响应式值类型变量
const stateRef = toRefs(state);
const { name: nameRef, age: ageRef } = stateRef
// 将reactive封装的对象, 使用toRef获取某个属性值, 具备响应式
const sexRef = toRef(state, 'sex')
const sayHello2 = () => {msgRef.value = '你好!'emites('onSayHello', 'hello-----')
}
// xx.key = ???适用于reactive封装的响应式对象
const updateState = () => {state.name = '双双';state.age = 22;state.sex = '男';// 或者找到响应式值类型,使用 .value进行修改// nameRef.value = '双双'// ageRef.value = 22// sexRef.value = '男'
}
// ref值类型, 使用.value进行修改
const updateRef = () => {msgRef.value = 'hello!'
}const msgRef = ref('值类型');
</script><template><h1>{{ msg }}</h1><h1>{{ msgRef }}, 我叫:{{ nameRef }}, 年龄:{{ ageRef }}, 性别:{{ sexRef }}</h1><button @click="sayHello2">打招呼</button><button @click="updateState">修改名字,年龄,性别</button><button @click="updateRef">用英文打招呼</button>
</template><style scoped>
.read-the-docs {color: #888;
}button {margin: 10px;
}
</style>

2. 子组件, script标签是这种写法: <script>时

<script>
import { ref, reactive, toRef, toRefs } from 'vue'
export default {props: {msg: String},emits: ['onSayHello'],setup(props, { emit }) {console.log(props); // 父组件传进来的数据const state = reactive({name: 'alice',age: 20,sex: 1});// 将reactive封装的对象, 使用toRefs获取的对象, 它可以进一步解构, 获取响应式值类型变量const stateRef = toRefs(state);const { name: nameRef, age: ageRef } = stateRef// 将reactive封装的对象, 使用toRef获取某个属性值, 具备响应式const sexRef = toRef(state, 'sex')const sayHello2 = () => {msgRef.value = 'hello, 你好!'emit('onSayHello', 'hello-----')}// xx.key = ???适用于reactive封装的响应式对象const updateState = () => {state.name = '双双';state.age = 22;state.sex = 0;}// ref值类型, 使用.value进行修改const updateRef = () => {msgRef.value = '你好啊!'ageRef.value = 33sexRef.value = '男'}const msgRef = ref('值类型');// 注意要返回变量和方法等模板需要使用的东西, 否则页面不会渲染return {msgRef,sayHello2,nameRef,ageRef,sexRef,updateState,updateRef,}}
}
</script><template><h1>{{ msgRef }}, 我叫:{{ nameRef }}, 年龄:{{ ageRef }}, 性别:{{ sexRef }}</h1><button @click="sayHello2">say hello</button><button @click="updateState">修改state的值</button><button @click="updateRef">修改ref的值</button>
</template><style scoped>
button {margin: 10px;
}
</style>

父组件: App.vue

<script setup>
import HelloWorld from './components/Test2.vue'
function onSayHello(a) {console.log(a)
}
</script><template><HelloWorld msg="Vite + Vue" @onSayHello="onSayHello"/>
</template><style scoped>
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>