手册

Vue教程

简介指令 v-bind v-if 条件语句 v-show v-for 循环语句事件 v-on 方法事件修饰符表单 v-model CSS 绑定 Computed 计算属性观察者模板

Vue参考

内置属性组件实例

首页大前端 Vue.js Vue 教程

Provide/Inject

阅读13788

更新时间2025-08-22

生命周期钩子

路由

提供数据

我们使用"provide"配置选项来使数据可供其他组件使用:

App.vue:

在上面的代码中，现在提供了"foods"数组，以便可以将其注入到项目中的其他组件中。

注入数据

现在"App.vue"中的"provide"提供了"foods"数组，我们可以将其包含在"FoodKinds"组件中。

将"foods"数据注入到"FoodKinds"组件中后，我们可以使用 App.vue 中的数据在"FoodKinds"组件中显示不同的食物:

示例

FoodKinds.vue:

运行示例 »

Vue 练习

通过练习测试自己

练习题:

下面的代码中需要哪个配置选项，以便fishName(鱼名称)"Turbot"可供其他组件使用?

data() {
  return {
    fishName: 'Turbot',
    count: 4
  }
},
() {
  return {
    fishName: this.fishName
  }
}

生命周期钩子

路由

RELATED VIDEOS

科技资讯

精选课程

PHP实战天龙八部之微信支付视频教程

共5课时

17.2万人学习

PHP实战天龙八部之仿爱奇艺电影网站

共49课时

77万人学习

前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程

共89课时

125万人学习

热门下载

phpStudy 2018最新版

下载

vc9-vc14（32+64位）运行库合集（链接在下方）

下载

VC9 32位

下载

VC11 32位

下载

php程序员工具箱完整版

下载

VC14 32位

下载

SublimeText3汉化版

下载

Notepad++7.3.1

下载

phpStudy V8.1（Win64位）（已支持php8）

下载