子组件获取父组件数据

父组件内v-bind:属性名="父组件内变量名",简写为 :属性名="父组件内变量名",当发送多个数据时可以在父组件内把数据打包成一个json对象,以对象的形式发送至子级,此种方式发送数据在子级接收时要注意数据的类型为Object。或者数据不多,可以多定义几个属性也行,如 :m="name" :a="age",此中方式发送数据时属性名字对应即可;

<template>
  <div id="app">
    <h1>这里是父组件</h1>
    <hello :name="name"></hello>
  </div>
</template>

<script>
import hello from './components/Hello'
export default {
  name: 'app',
  data () {
    return {
      name: '张三'
    }
  },
  components: {
    hello
  }
}
</script>

2.子组件内接收props接收,props: ['属性名'] 或者 props: {属性名:{type:数据类型,default:默认值。。。。}}

<template>
  <div id="hello">
    {{name}}
  </div>
</template>

<script>
export default {
  name: 'hello',
  props: {
    name: {
      type: String
    }
  }
}
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,374评论 19 139
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 13,862评论 6 13
  • 9.1 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,...
    白水螺丝阅读 4,223评论 0 2
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,459评论 0 29
  • 此文基于官方文档,里面部分例子有改动,加上了一些自己的理解 什么是组件? 组件(Component)是 Vue.j...
    陆志均阅读 9,239评论 5 14