vue pros 子组件接收父组件传递的值
1.子组件
ItemTemplate.vue
<template>
<div class="item">
<li v-for="pdata in pdatas">{{pdata.text}}</li>
</div>
</template>
<script>
export default {
name: 'Item',
props: ['propdatas'], //必须声明父组件传的值的键名
data () {
return {
pdatas: this.propdatas,
}
}
}
</script>
2.父组件
<template>
<div class="about">
<li>{{msg}}</li>
<Item :propdatas="person.todos"/> //propdata是父组件传到子组件的键 person.todos是父组件传给子组件的值
</div>
</template>
<script>
import Item from './ItemTemplate'
export default{
name: 'About',
components: { Item }, //子组件必须声明父组件
data() {
return {
msg: 'hello world',
person: {
name: 'VUE',
introduce: null,
age: null,
todos:[
{id:1, text:'任务1'},
{id:2, text:'任务2'},
{id:3, text:'任务3'},
]
}
}
}
}
</script>
<style scoped>
<style>
vue pros 子组件接收父组件传递的值的更多相关文章
- Vue 子组件接收父组件的值
1.父组件 <template> <div id="rightmenu8"> <rightmenu7 ref="rightmenu7&quo ...
- vue 父向子组件传递数据,子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- vue子组件向父组件传递参数的基本方式
子组件: this.$emit('transferUrl', this.picUrl) 父组件: 引入子组件<pics @transferUrl="gettransferUrl&quo ...
- vuejs子组件向父组件传递数据
子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据 <!DOCTYPE html> <html lang=" ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
- vue组件之子组件和父组件
在看官网和学习的过程中,有些不明确子组件和父组件的定义,为了方便后期学习和理解去网站上搜索了一下相关的解释 1.使用的地方是父组件,定义的地方是子组件,虽然他们是同一个组件 2.Vue.compone ...
随机推荐
- 添加删除mysql用户
create user 'hive_user'@'%' identified by '密码'; grant all privileges on hive.* to hive_user@'%'; cre ...
- replace实现替换全部
方法: string.replace(new RegExp(oldString,"gm"),newString)) gm g=global, m=multiLine , 大致上方法 ...
- 安全测试6_Web安全工具第一节(浏览器入门及扩展)
今天来学习下浏览器的功能,浏览器是我们经常用到但是功能却很强大的一个东东,我们经常用到的无非是三种(谷歌.火狐.IE) 1.浏览器功能介绍: 下面以谷歌浏览器(Chrome版本为56)为例,介绍下,懂 ...
- Freemarker入门
Freemarker入门 工程引入依赖 <dependency> <groupId>org.freemarker</groupId> <artifactId& ...
- Python :数据结构
LearnPython :数据结构 .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .labe ...
- oracle 12c ins-30131 执行安装程序验证所需的初始设置失败
- openstack provider self-service network subnet 创建
- 51.纯 CSS 创作一个雷达扫描动画
原文地址:https://segmentfault.com/a/1190000015283286 感想:linear-gradient() 刷新了我的认知,它可以并列多个而不会被覆盖,并列使用时用 , ...
- ClientAbortException: java.net.SocketException: 断开的管道
这次终于解决了 ClientAbortException ! [ERROR] [- ::] net.jweb.actions.CommonDiskAction - 系统异常 ClientAbortEx ...
- WebForm(response内置函数)#转
利用提供的内置对象,可以实现页面之间的数据传递及实现一些特定的功能,如:缓冲输出,页面重定向等等. Response :响应,反应 Request:请求 Server:服务器 Application: ...