网站空间商盗取数据,天津站内关键词优化,做网站需要ftp,北京好的做网站的公司有哪些defineProps() 和 defineEmits()
内置函数#xff0c;无需import导入#xff0c;直接使用。传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的范围。因此#xff0c;传入的选项不能引用在 setup 范围中声明的局部变量(比如设置默认值时)#xff0c;但是…defineProps() 和 defineEmits()
内置函数无需import导入直接使用。传入到 defineProps 和 defineEmits 的选项会从 setup 中提升到模块的范围。因此传入的选项不能引用在 setup 范围中声明的局部变量(比如设置默认值时)但是它可以引用导入import的变量因为它们也在模块范围内。就是说props设置默认值的时候不能直接用setup里的变量可以用import引入的数据
script setup
//props是响应式的不能解构
//方法1不能设置默认值(使用withDefaults解决)
const props defineProps({foo?: String,id: [Number, String],onEvent: Function, //Function类型metadata: null
})//方法2
const props defineProps({ foo: { type: String, required: true, default: 默认值 }, bar: Number })//方法3-推荐弊端不能设置默认值(使用withDefaults解决)
interface Props {data?: number[]
}
//const props definePropsProps();
//或const props defineProps{ data?: number[] }();
const props withDefaults(definePropsProps(), { data: () [1, 2] })const emit defineEmits([change, delete]) //声明从父组件来的事件
//将事件传递出去
emit(change, 参数);
emit(delete, 参数);
/script
defineExpose()
内置函数无需import导入直接使用。Vue3中的setup默认是封闭的如果想要使用ref或者 $parent 获取到的组件的的变量或函数被访问的组件须使用defineExpose将属性和方法暴露出去。使用方式参考获取DOM
获取DOM
官网Api Vue3中移除了 $children 属性
ref$parent$root
!--父组件parent.vue --
templatechild refchildRef/childdiv refdivEl/div
/template
script setup langts
import child from ./components/child.vue;
import type { ComponentInternalInstance } from vue;
//import { getCurrentInstance, ComponentInternalInstance } from vue; 我用了自动导入不需要引getCurrentInstance//方法一常用推荐
//typeof P 是获取到类InstanceType类是拿到类的实例一个是类一个是实例不一样
//为了获取组件的类型我们首先需要通过 typeof 得到其类型再使用 TypeScript 内置的 InstanceType 工具类型来获取其实例类型//获取组件。这个变量名和 DOM 上的 ref 属性必须同名会自动形成绑定。变量名不能和组件名同名即chilRef不能命名为child
let childRef refInstanceTypetypeof child | null(null); //获取dom
let divEl refHTMLDivElement | null(null)//方法二(不推荐)
//这样写会标红类型“ComponentInternalInstance | null”上不存在属性“proxy”。使用类型断言或非空断言
const { proxy } getCurrentInstance() as ComponentInternalInstance;
//或const { proxy } getCurrentInstance()!;let parentNum ref(1)onMounted(() {console.log(divEl.value); //直接拿到dom本身console.log(childRef.value?.msg); //.value的方式调用子组件的数据和方法defineExpose暴露childRef.value?.open();console.log(proxy?.$refs); //proxy对象{childRef: Proxy(Object), divEl: div}
});
defineExpose({parentNum
})/script
注意 如果ref在v-for里,将会是一个数组这里和vue2一样。使用childRef.value[0].msg
//子组件child.vue
script setup langts
import type { ComponentInternalInstance } from vue
let msg: string 111;
const open function() {console.log(222);}
const { proxy } getCurrentInstance() as ComponentInternalInstance;
onMounted(() {//标红类型“ComponentPublicInstance”上不存在属性“parentNum”console.log(parent, proxy?.$parent?.parentNum);
})
defineExpose({msg,open
})
/script
useAttrs()
包含了父组件传递过来的所有属性(子组件内没有被defineProps和defineEmits声明的)包括 class 和 style 以及事件相当于vue2中相当于listeners。在vue2中listeners。在vue2中listeners。在vue2中attrs 是接到不到 class 和 style 的
//parent.vue
templatechildfoo222foo2333classchild:style{}testhandleTesttest2handleTest/child
/template
script setup langts
function handleTest() {}
/script //child.vue
templatediv/div
/template
script setup langtsconst props defineProps([foo2])const emits defineEmits([test2])console.log(props); //{foo2: 333}const attrs useAttrs()console.log(attrs); // {foo: 222, class: child, style: {…}, onTest: f handleTest()}
/script
全局注册
//vue2中
Vue.prototype.$axios xxx//使用
this.$axios
# 扩展全局属性
//main.ts
import { createApp } from vue
import App from ./App.vue
const app createApp(App)app.config.globalProperties.name 猪八戒
app.mount(#app)script setup langts
import type { ComponentInternalInstance } from vue;
// proxy 就是当前组件实例可以理解为组件级别的 this没有全局的、路由、状态管理之类的
const { proxy, appContext } getCurrentInstance() as ComponentInternalInstance;//global 就是全局实例
const global appContext.config.globalPropertiesconsole.log(global.name)
console.log(proxy?.name) //会标红
/script
异步组件
## 异步组件路由懒加载
设置组件名称
在 3.2.34 或以上的版本中使用 script setup 的单文件组件会自动根据文件名生成对应的 name 选项即使是在配合 KeepAlive 使用时也无需再手动声明。不写index.vue,写一个具象的组件名称再加个平级的script标签(注意两个script标签使用的语言要同步langts)
script langts setup
/script
script langtsexport default {name: draft,inheritAttrs: false,customOptions: {},};
/script
3.defineOptions 这个宏可以用来直接在 script setup 中声明组件选项而不必使用单独的 script 块 官网解释
script langts setupdefineOptions({name:draft})
/script 4.利用插件
vite-plugin-vue-setup-extend-plusvite-plugin-vue-setup-extend断点调试存在问题未修复sourcemap is brokenunplugin-vue-define-options error in productiondefineOptions is not defined
//会报错[vueSetupExtend不是一个函数]删掉package.json 中的 type module即可
//vite.config.ts
import { defineConfig, Plugin } from vite
import vue from vitejs/plugin-vue
import vueSetupExtend from vite-plugin-vue-setup-extend-plusexport default defineConfig({plugins: [vue(), vueSetupExtend()],
})//SFC
templatedivhello world {{ a }}/div
/templatescript langts setup nameApp inheritAttrsfalseconst a 1
/script
watch的使用
官网 当我们需要在数据变化时执行一些“副作用”如更改 DOM、执行异步操作(发起网络请求等)我们可以使用 watch 函数
监听基本数据类型
const name ref(猪八戒)
// 监听 ref 属性
watch(name, (newValue, oldValue) { }) 监听对象
const obj reactive({a: 1,b: 2,c: {d: 1,e: 2},f: []
})
//法一深层次当直接侦听一个响应式对象时侦听器会自动启用深层模式
//可以监听到obj.f [1]和obj.c.d
watch(obj, (newValue, oldValue) {
})//法二深层次必须写deep: true不然浅层的也监听不到
watch(() obj, (newValue, oldValue) {
}, { deep: true })//法三浅层, 监听不到obj.f [1]和obj.c.d
watch(() { ...obj }, (newValue, oldValue) {
}) 监听对象的某个属性
watch(() obj.a, (newValue, oldValue) {
})//如果是对象的属性是引用数据类型必须加deep: true才能监听到
watch(() obj.f, (newValue, oldValue) {
}, { deep: true })
监听多个数据
//法一
watch([() obj.a, name], ([newA, newName], [oldA, oldName]) {});
//法二:
watch(() [obj.a, obj.b], (newValue, oldValue) {
})
watchEffect
官网
watch 默认是懒执行的仅当数据源变化时才会执行回调。可以传入immediate: true 选项来强制侦听器的回调立即执行watchEffect的回调会立即执行依赖收集不需要指定 immediate: true。在执行期间它会在同步执行过程中自动追踪所有能访问到的响应式属性。watch手动指定依赖watchEffect自动收集依赖注意: 依赖太多各种坑watchEffect 无法访问侦听数据的新值和旧值
//侦听器的回调使用与源完全相同的响应式状态是很常见的。例如下面的代码在每当 todoId 的引用发生变化时使用侦听器来加载一个远程资源
const todoId ref(1)
const data ref(null)watch(todoId, async () {const response await fetch(https://jsonplaceholder.typicode.com/todos/${todoId.value})data.value await response.json()
}, { immediate: true })//使用watchEffect简化代码我们不再需要明确传递 todoId 作为源值.
watchEffect(async () { const response await fetch( https://jsonplaceholder.typicode.com/todos/${todoId.value});data.value await response.json()
})
使用哪种随你喜欢如果不需要使用先前值(oldValue)并且希望立即执行就用watchEffect可以少写一点代码。watch的自由度更高watchEffect相当于封装了一层推荐在大部分时候用 watch 显式的指定依赖以避免不必要的重复触发也避免在后续代码修改或重构时不小心引入新的依赖。watchEffect 适用于一些逻辑相对简单依赖源和逻辑强相关的场景
停止监听器
一个关键点是侦听器必须用同步语句创建这时它会在宿主组件卸载时自动停止。如果用异步回调创建一个侦听器那么它不会绑定到当前组件上你必须手动停止它以防内存泄漏。
// 它会自动停止
watchEffect(() {}) // ...这个则不会
setTimeout(() { watchEffect(() {}) }, 100)//停止监听器
const unwatch watchEffect(() {}) // ...当该侦听器不再需要时 unwatch()//第二个参数是在发生变化时要调用的回调函数。这个回调函数接受三个参数新值、旧值以及一个用于注册副作用清理的回调函数。
//该回调函数会在副作用下一次重新执行前调用可以用来清除无效的副作用例如等待中的异步请求。
watch(id, async (newId, oldId, onCleanup) {const { response, cancel } doAsyncWork(newId)// 当 id 变化时cancel 将被调用// 取消之前的未完成的请求onCleanup(cancel)data.value await response
})
computed
官网
//创建一个只读的计算属性 ref
const count ref(1)
const plusOne computed(() count.value 1) console.log(plusOne.value) // 2
plusOne.value // 错误//创建一个可写的计算属性
onst count ref(1)
const plusOne computed({ get: () count.value 1, set: (val) { count.value val - 1 }
}) plusOne.value 1 console.log(count.value) // 0 计算属性的 getter 应只做计算而没有任何其他的副作用这一点非常重要请务必牢记。举例来说不要在 getter 中做异步请求或者更改 DOM
CSS
样式穿透Vue3 中不支持 /deep/ 或者 写法 支持:deep(.class)
style scoped .a :deep(.b) { /* ... */ }
/style css绑定js变量v-bind单文件组件的 style 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态。
script setup
const theme {color: red
}
/scripttemplatephello/p
/templatestyle scoped
p {color: v-bind(theme.color);
}
/style
provie和inject
//父级
const name ref(猪八戒);
const changeName (newName: string) {name.value newName;
};
provide(name, name);
provide(changeName, changeName); //更改name的方法//子级孙级
const name inject(name) as string; //使用类型断言不然会有红色波浪线
const changeName inject(changeName) as Fn;
