Vue学习笔记(3)|青训营笔记

41 阅读5分钟

这是我参与「第五届青训营」伴学笔记创作活动的的第10天 (❤ ω ❤)

image.png 36、使用哪种方式交换数据更合适:

应该只在绝对需要时才使用组件引用。大多数情况下,你应该首先使用标准的 props 和 emit 接口来实现父子组件交互。

37、mounted:function() {}是生命周期函数,可以在dom完成渲染后执行

38、插槽 父组件可以为子组件传递内容,使其渲染;

在子组件使用slot标签为插槽出处,在父组件使用双标签填充内容,这样父组件里的内容就会替换掉子组件的slot标签

39、具名插槽 想要具体给每个slot标签替换内容,需要在slot标签加上一个属性name(加了name必须要在父组件通过template标签才能替换),在父组件里使用template标签加上v-slot:name,然后template标签里的内容会替换掉对应名字的插槽;v-slot只能添加在template上

40、插槽的作用域 默认情况下,就近原则,插槽内容无法访问子组件的数据。父组件模板中的表达式只能访问父组件的作用域;子组件模板中的表达式只能访问子组件的作用域。

41、备用内容 当父组件没有向子组件替换slot时,可以为其设置默认值,直接在slot标签里写即可

42、作用域插槽 当子组件想传递数据给父组件时,例如:在子组件slot标签使用name=ul v-bind='listd把数据穿过去给父组件,父组件使用template标签接收,v-slot:ul='dataf这是在template标签里就可以使用到data这个变量,如果子组件并为命名则父组件则要用v-slot:default='';子组件可以绑定多个属性,父组件接收的是一个对象

43、provide/inject实现跨级通讯

provide在父组件里是一个函数,需要返回一个对象才能访问到自己的作用域,如果直接是对象那只能传定值,无法传data里的数据;在子组件使用inject即可访问到父组件,注意,此方法没有响应式,若要响应式采用引用类型返回响应式对象的方法返回本地data里的对象即可

若要使用函数返回响应式数据,则使用箭头函数返回当前组件的数据,即有响应式数据,在子组件调用该函数即可

44、vue的生命周期

以下内容全部都是vue3

vue3所有的内置方法都要import形式导入使用!!!

45、组合式api,组件在创建之前自动调用setup,他可以代替beforeCreate和created,注意setup里没有this,直接调用即可

46、在setup里暴露响应式的基本类型变量需要通过ref的帮助

import { ref } from 'vue';

导入ref后,直接执行ref(data),他会返回一个对象,把这个对象暴露出去即可,如需要在方法里该值,要在这个对象.value更改,在mustache语法里他会自动取解析Object.value的值,ref存在的意义就是把基本数据类型转换成对象,这样做到引用类型的响应式

47、reactive import { ref,reactive } from 'vue';

reactive是用来转换响应式对象的,注意,暴露出入时不能使用解构赋值,否则会使响应式失效,如确实需要解构,则需要再导入toRefs来解构toRefs;如...toRefs(Object)

48、vue3的监听函数watch需要导入进来,watch(监听的变量,回调函数[newValue,oldValue],选项)直接调用同来实现监听效果;

49、watchEffect(回调函数)该方法在运行时会自动收集回调函数内所有依赖,并先运行一次,每当依赖改变时,就会触发回调函数

50、computed(回调函数c需要在回调函数里返回一个内容,用变量接起来即可,不能将computed依赖的变量赋值给依赖的变量

51、使用生命周期钩子,和vue基本一致,导入后直接使用,当对应事件触发回调函数就会执行,名字比vue2前面多加了个on;例如onMounted(() => {})当挂载完成后就会执行该回调函数

52、在setup里想要使用父组件传过来值props,首先要在export default里接收props,然后在setup加上一个形参用来接受props传来的数据,setup(props)

53、setup里的第二个参数Context,写法setup(props,conText)翻译过来时上下文的意思,里面会有父组件attrs(函数)等价与attrs还有触发事件emit(函数),插槽slots(对象),暴露公共属性expose(函数)expose是在setup返回的是()=>h(div,Iamdata)函数的时候使用的,因为setup遇到h函数会把原应该有的template里的内容给替换为函数里的内容,此时父组件就无法获取setup里的值了,就要使用expose来对外暴露数据,需要传一个对象进去,写上要暴露的内容,他会自动挂载到attrs还有触发事件emit(函数),插槽slots(对象),暴露公共属性expose(函数);expose是在setup返回的是() => {h('div','I am data')}函数的时候使用的,因为setup遇到h函数会把原应该有的template里的内容给替换为函数里的内容,此时父组件就无法获取setup里的值了,就要使用expose来对外暴露数据,需要传一个对象进去,写上要暴露的内容,他会自动挂载到refs上,在父组件使用子组件标签中加上ref属性,然后在$refs找到ref属性的值,target里的内容,由于expose会再封多一层proxy,proxy中有一个类似原型链的东西,所以直接.property可以直接访问到;

54、provide/inject使用,在父组件导入provide(name,data)后使用,随即在子组件导入inject(name,defaultValue),如果想要数据是响应式的要用ref或者reactive创建响应式数据然后传过去

55、在script标签加上setup,里面的代码会被编译成组件 setup() 函数的内容,而且不需要暴露变量或者函数,直接使用即可

56、vue-router是基于路由和组件的,路由用来设定访问路径,将路径和组件映射起来