城口集团网站建设,仿造整个网站,抖音商家页面模板,个人申请公众号注册ref是什么?
生成值类型的响应式数据可用于模板和reactive通过.value修改值可以获取DOM元素
p ref”elemRef”{{nameRef}} -- {{state.name}}/p
// 获取dom元素
onMounted((){ console.log(elemRef.value); }); toRef是什么?
针对一个响应式对象(rea…ref是什么?
生成值类型的响应式数据可用于模板和reactive通过.value修改值可以获取DOM元素
p ref”elemRef”{{nameRef}} -- {{state.name}}/p
// 获取dom元素
onMounted((){ console.log(elemRef.value); }); toRef是什么?
针对一个响应式对象(reactive封装)的prop属性!!!创建一个ref, 具有响应式两者保持引用关系 toRefs是什么?
将响应式对象(reactive封装)转换为普通对象对象的每个prop属性都是对应的ref两者保持引用关系 最佳使用方式
用reactive做对象的响应式, 用ref做值类型响应式需要解构响应式对象使用toRefs(state), 只需要获取单个响应式值类型使用toRef(state, ‘xxx’);ref的变量命名都用xxRef合成函数返回响应式对象时, 用toRefs(usexx这种钩子函数); 使用示例:
1. 子组件, script标签是这种写法: script setup langts时
script setup langts
import { ref, reactive, toRef, toRefs, defineProps } from vue;
// 父组件传数据 :msgxxx
defineProps({msg: String
});
// 子组件通知父组件使用onSayHelloxxx, 子组件需要使用时eg: emites(onSayHello, hello啊啊啊啊)
interface IEmits {(e: onSayHello, arg1: String): void;
}
const emites defineEmitsIEmits();
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(值类型);
/scripttemplateh1{{ msg }}/h1h1{{ msgRef }}, 我叫:{{ nameRef }}, 年龄:{{ ageRef }}, 性别:{{ sexRef }}/h1button clicksayHello2打招呼/buttonbutton clickupdateState修改名字,年龄,性别/buttonbutton clickupdateRef用英文打招呼/button
/templatestyle scoped
.read-the-docs {color: #888;
}button {margin: 10px;
}
/style2. 子组件, 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,}}
}
/scripttemplateh1{{ msgRef }}, 我叫:{{ nameRef }}, 年龄:{{ ageRef }}, 性别:{{ sexRef }}/h1button clicksayHello2say hello/buttonbutton clickupdateState修改state的值/buttonbutton clickupdateRef修改ref的值/button
/templatestyle scoped
button {margin: 10px;
}
/style父组件: App.vue
script setup
import HelloWorld from ./components/Test2.vue
function onSayHello(a) {console.log(a)
}
/scripttemplateHelloWorld msgVite Vue onSayHelloonSayHello/
/templatestyle scoped
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
/style
