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 子组件接收父组件传递的值的更多相关文章

  1. Vue 子组件接收父组件的值

    1.父组件 <template> <div id="rightmenu8"> <rightmenu7 ref="rightmenu7&quo ...

  2. vue 父向子组件传递数据,子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  3. Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  5. vue子组件向父组件传递参数的基本方式

    子组件: this.$emit('transferUrl', this.picUrl) 父组件: 引入子组件<pics @transferUrl="gettransferUrl&quo ...

  6. vuejs子组件向父组件传递数据

    子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据 <!DOCTYPE html> <html lang=" ...

  7. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  8. vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  9. vue组件之子组件和父组件

    在看官网和学习的过程中,有些不明确子组件和父组件的定义,为了方便后期学习和理解去网站上搜索了一下相关的解释 1.使用的地方是父组件,定义的地方是子组件,虽然他们是同一个组件 2.Vue.compone ...

随机推荐

  1. 添加删除mysql用户

    create user 'hive_user'@'%' identified by '密码'; grant all privileges on hive.* to hive_user@'%'; cre ...

  2. replace实现替换全部

    方法: string.replace(new RegExp(oldString,"gm"),newString)) gm g=global, m=multiLine , 大致上方法 ...

  3. 安全测试6_Web安全工具第一节(浏览器入门及扩展)

    今天来学习下浏览器的功能,浏览器是我们经常用到但是功能却很强大的一个东东,我们经常用到的无非是三种(谷歌.火狐.IE) 1.浏览器功能介绍: 下面以谷歌浏览器(Chrome版本为56)为例,介绍下,懂 ...

  4. Freemarker入门

    Freemarker入门 工程引入依赖 <dependency> <groupId>org.freemarker</groupId> <artifactId& ...

  5. Python :数据结构

    LearnPython :数据结构 .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .labe ...

  6. oracle 12c ins-30131 执行安装程序验证所需的初始设置失败

  7. openstack provider self-service network subnet 创建

  8. 51.纯 CSS 创作一个雷达扫描动画

    原文地址:https://segmentfault.com/a/1190000015283286 感想:linear-gradient() 刷新了我的认知,它可以并列多个而不会被覆盖,并列使用时用 , ...

  9. ClientAbortException: java.net.SocketException: 断开的管道

    这次终于解决了 ClientAbortException ! [ERROR] [- ::] net.jweb.actions.CommonDiskAction - 系统异常 ClientAbortEx ...

  10. WebForm(response内置函数)#转

    利用提供的内置对象,可以实现页面之间的数据传递及实现一些特定的功能,如:缓冲输出,页面重定向等等. Response :响应,反应 Request:请求 Server:服务器 Application: ...