55Vue - Props(使用Props传递数据)

简介: 55Vue - Props(使用Props传递数据)

组件实例的作用域孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项 声明 “prop”

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样,prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})

然后向它传入一个普通字符串:

<child message="hello!"></child>

结果:

目录
相关文章
|
13天前
|
监控 JavaScript 前端开发
使用Vue.js开发员工上网行为监控的实时数据展示页面
使用Vue.js开发的实时员工上网行为监控页面,展示员工访问的网站、应用和时间等数据。页面响应式设计,适应不同设备。通过Vue组件显示实时数据,如`&lt;li v-for=&quot;activity in activities&quot;&gt;`循环渲染。数据定时更新,利用Vue的生命周期钩子和axios从服务器获取并自动刷新,确保数据的时效性。该页面有助于管理者即时了解员工网络活动,保障企业网络安全和资源管理。
69 5
|
1月前
|
JavaScript 前端开发 开发者
响应式原理:Vue 如何跟踪数据变化
【4月更文挑战第22天】Vue 的响应式系统是其核心,通过数据双向绑定实现视图与数据同步。依赖收集和观测数据使Vue能跟踪变化,变化通知组件更新视图。高效的更新策略如批量更新和虚拟DOM提升性能。组件化和可组合性支持有效通信和代码复用,强调数据驱动开发。开发者应合理组织数据、谨慎处理变更并充分利用组件化优势,以提高效率和用户体验。
|
1月前
Vue3响应式数据ref
Vue3响应式数据ref
|
1月前
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
|
14天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的共享单车数据存储系统附带文章源码部署视频讲解等
11 1
|
15天前
|
JavaScript
vue数据的双向绑定
vue数据的双向绑定
|
20天前
|
JavaScript
|
22天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的旅游数据附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的旅游数据附带文章源码部署视频讲解等
14 0
|
1月前
|
JavaScript
vue3表格编辑(数据回显)和删除功能实现
vue3表格编辑(数据回显)和删除功能实现
27 1
|
1月前
|
JavaScript 索引
vue 在什么情况下在数据发生改变的时候不会触发视图更新
vue 在什么情况下在数据发生改变的时候不会触发视图更新
35 2