建设网站图片素材,网站建设品牌策划方案,个人网站是否需要备案,注册网站免费注册历史小剧场 什么东西#xff0c;都有使用年限#xff0c;比如大米、王朝。 不同的是#xff0c;大米的年限看得见#xff0c;王朝的年限看不见。看不见#xff0c;却依然存在。对于气数#xff0c;崇祯是不信的#xff0c;开始不信。等到崇祯十四年#xff0c;怕什么来…历史小剧场 什么东西都有使用年限比如大米、王朝。 不同的是大米的年限看得见王朝的年限看不见。看不见却依然存在。对于气数崇祯是不信的开始不信。等到崇祯十四年怕什么来什么后院起火前院也起火卢象昇死了辽东白了中原乱了信了。 前言
在组件嵌套多层情况下不论组件嵌套多深父组件都可以通过provide来提供数据子组件或孙组件或曾孙组件使用inject注入数据。还有在兄弟组件之间传值也很方便。
Vue2-OptionsAPI使用 什么是optionsAPI 我的理解就是像一个对象里面的属性方法都算是optionsAPI所以在Vue2中都是以这样的格式来编写代码的。 案例 App.vue
export default {provide: {// 丧失响应式name: 李四},...
}Father.vue
templatedivTestProvideOptionsAPIChild //div
/templatescript langts
import TestProvideOptionsAPIChild from ./TestProvideOptionsAPIChild.vue;export default {name: TestProvideOptionsAPIFather,components: {TestProvideOptionsAPIChild},
}
/scriptstyle langscss scoped/styleTestProvideOptionsAPIChild.vue
!-- --
templatedivh1{{ name }}/h1/div
/templatescript langts
export default {name: TestProvideOptionsAPIChild,inject: [name],
}
/scriptstyle langscss scoped/styleVue3-CompositionAPI使用
在组合式API中我们需要在setup()函数期间调用或者在setup 语法糖里使用必须从vue显示导入provide/inject方法
案例
App.vue
export default {setup() {const name refstring(张三)const changeName () {name.value 王五}// 使用readonly包裹使其不可在子组件被修改provide(name, readonly(name))provide(age, 20)provide(sex, 男)provide(hobby, 跑步)provide(changeName, changeName)}...
}Father.vue
!-- --
templatedivTestProvideChild //div
/templatescript setup langts
import TestProvideChild from ./TestProvideChild.vue
/scriptstyle langscss scoped/styleTestProvideChild.vue
!-- TestProvideChild.vue --
templatedivh1{{ name }}/h1h1{{ age }}/h1h1{{ sex }}/h1h1{{ hobby }}/h1button clickchangeName修改姓名/buttonbrbutton clickinjectChangeName子组件修改姓名/buttonbr/div
/templatescript setup langts
import { inject } from vue;// inject() 方法第二个参数为默认值
let name inject(name, ),age inject(age, 0),sex inject(sex, unknown),hobby inject(hobby, ),changeName inject(changeName, () {});const injectChangeName () {name.value 心潮
}
/scriptstyle langscss scoped/style【默认规则】当我们使用provide/inject来实现组件通信的时候必须在父组件中去修改数据在子组件不可以自行去修改数据所以我们可以在父组件中使用provide传递数据时可以将数据使用readonly()方法去包裹。如此在子组件中去修改就修改不了了否则的话是可以修改的。这样对以后项目的数据维护不友好
