vue 高级属性父组件provide向子组件发送数据,子组件通过inject接收数据
以前父组件向子组件中传值是通过props传值,子组件不能更改父组件中的值,但是可以通过从父组件中获取的值定义给自己的data值,这里父组件可以通过provide向子组件传递自己组件中的data值,子组件通过inject获取父组件提供的值代码如下:
定义一个子组件:
<template>
<div>
{{demo}}
</div>
</template>
<script>
export default {
name: "childone",
inject: ['for'],
data ()
{
return {
demo: this.for
}
},
父组件:
<template>
<div class="hello">
<childe-one></childe-one>
</div>
</template> <script>
import comone from './com-one'
import ChildeOne from './childone'
export default {
components : {
ChildeOne
},
provide() {
return {for: this.demo}
},
data () {
return {
demo:'中国',
}
}
}
</script>
在父组件中定义provide方法返回属性对象,属性为for,属性值是组件中的data值,子主件childe-one通过inject接收父组件传递的for,子组件在自己的data中定义变量demo接收父组件的for,这样就实现了
父组件传递子组件的值,
vue 高级属性父组件provide向子组件发送数据,子组件通过inject接收数据的更多相关文章
- vue 3 学习笔记 (八)——provide 和 inject 用法及原理
在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传 ...
- Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
- Vue Prop属性(父to子)
通过Prop向子组件传递数据 第一步父组件中 <template> <div id="app"> <Users :users="users& ...
- vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
(vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...
- vue.js组件之j间的通讯一 子组件接受父祖件数据
Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件 ...
- 关于Vue中页面(父组件)下拉,页面中的子组件加载更多数据的实现方法
一个项目中存在很多这种情况:父组件(页面)中的子组件需要做下拉加载更多的需求,但是这个下拉到底部的动作只能通过监控页面(父组件)来完成 这就需要父子组件之间的通信,代码如下: 1. 建立一个用于父子组 ...
- vue父组件异步数据子组件接收遇到的坑
大家都知道父组件给子组件传值,子组件给父组件传值,两者通信并不难,官网上也有给案例,但是如果子组件想拿到父组件的异步数据,常规的写法是不行的,下面我记录我常用的两者写法: 方法1: 子组件用v-if, ...
- [vue]子组件通过props获取父组件数据以及使用watch解决动态数据不生效问题
父子组件的传值,在Vue官方也写得很清楚,父组件中使用v-bind绑定传送,子组件使用props接收. 父组件通过v-bind绑定数据: <template> <router-vie ...
- 解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况
在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求,我在新项目中就遇到这种需求.真实场景是父组件的早,中,晚三个按钮(代表三个时间段)来控制子组件的table表格列的动态加载. 子组 ...
随机推荐
- java开发_""和null的区别
转自:http://www.cnblogs.com/hongten/archive/2012/11/08/java_null.html#undefined 在代码中: 1 //name可以为" ...
- webkitAnimationEnd动画事件
春节终于过完了,自己春节似乎过的有点大,过完春节之后,态度一直没有调整好,总有一股过节的情绪,没有完全进入学习和工作的状态来.继续调整当中…… 这两天项目中遇到一个小需求,十分类似于支付宝蚂蚁森林给小 ...
- 安装python的jupyter notebook工具
jupyter notebook是一个通过网页运行python的工具 支持分段的python运行,并能直观的查看结果 支持多python环境运行,需要加装(conda) 安装步骤 1.安装python ...
- 25.安装配置phantomjs
1.官网下载windows版本:http://phantomjs.org/download.html2.下载完解压,将PhantomJS可执行文件配置到环境变量里.比如: 将 E:\Soft\soft ...
- <转载> js 闭包
http://www.haorooms.com/post/js_bbtwo http://www.jb51.net/article/24101.htm http://www.cnblogs.com/f ...
- redis(2)---redis基本数据类型及常见命令
Redis的魅力 缓存大致可以分为两类,一种是应用内缓存,比如Map(简单的数据结构),以及EH Cache(Java第三方库),另一种就是缓存组件,比如Memached,Redis:Redis(re ...
- 【ASP.NET 问题】Win7中IIS被防火墙阻止导致外网无法访问的解决方法。
今天装了IIS7.0,把网站发布了上去,但局域网的其他电脑始终无法访问主机上的网站. 于是想到防火墙的原因,把防火墙关掉,可以正常访问,但是打开就不行. 于是去网上找资料,总算搞定了. 原来在防火墙的 ...
- 排查bug的步骤
原创文章,欢迎阅读,禁止转载. bug预防C/C++代码发布前的检查:检查有没有低级错误,可用cppcheck (bug预防是指在写程序的时候,bug没出现,积极的进行预防,减少.包括良好的编码风格. ...
- golang 操作redis 错误:failed redigo: unexpected type for String, got type int64
报错的代码: isExist,err := redis.String(conn.Do("EXISTS", key)) 这个操作返回的应该是bool类型,所有改成 isExist,e ...
- ESXi 上创建CentOS虚拟机
之前介绍了ESXi上添加存储.本篇介绍一下在ESXi上创建CentOS虚拟机. 方法/步骤 登陆ESXi,选择“创建/注册虚拟机” 选择“创建新的虚拟机” 给装的虚拟机命名,并选择操作系统及版本 ...