vue父子组件传值:详解父组件向子组件传值(props)

作者:神秘网友 发布时间:2020-10-29 01:21:59

vue父子组件传值:详解父组件向子组件传值(props)

vue父子组件传值:详解父组件向子组件传值(props)

vue父子组件传值:父组件向子组件传值用的是props

1.定义父组件

1)父组件想要向子组件传值时,那么需要在子组件引入的地方绑定一个属性,属性值就是要传的数据,并且要在父组件中引入子组件。

2)这个自定义属性的属性值是用来存放父组件向子组件传递的数据。

3)在这里,name即是要传的数据,需要在data定义,所以当传递的数据时字符串类型时,可以在data定义为 name:''

父组件如下:

vue父子组件传值:详解父组件向子组件传值(props)

2.定义子组件

1)子组件使用props属性接收父组件传递过来的值。

写法是:

 props:{
	父组件自定义的属性:该值的类型,
	required:true
 }

所以在这里是:

 props: {
      inputName: String,
      required: true
    }

2)然后可以直接在页面上以这个形式“{{}}”引用。

子组件如下:

vue父子组件传值:详解父组件向子组件传值(props)

1.父组件代码如下:

<template>
  <div>
    父组件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 引入子组件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

2.子组件代码

<template>
  <div>
    子组件:
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>

vue父子组件传值:详解父组件向子组件传值(props)相关教程

  1. Vue组件--动态组件--[Vue warn]: Unknown custom element: <abc

    Vue组件--动态组件--[Vue warn]: Unknown custom element: <abc> - did you register the component correctly? 首先摆上错误代码 以下是正确代码 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initi

  2. vue父子组件间的数据传递

    vue父子组件间的数据传递 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 title父子组件的数据传递/title script src='./vue.js'/script/headbody div id=root counter/counter counter/counter /div script var counter = { template: 'div0/div' } var

  3. vue 实时监听数据实现报警功能

    vue 实时监听数据实现报警功能 项目需求: 项目中需要实时监听数据变化达到预定值后,会触发报警功能(报警弹窗提示) 问题描述: 1.前台在不断获取数据时候数据传输过程中,要避免数据一直积累,页面越来越卡; 2.该报警功能需要在所有页面中进行监听; 解决

  4. Cesium系列4 — Vue+Cesium开发环境搭建(基于Cesium1.74)

    Cesium系列4 — Vue+Cesium开发环境搭建(基于Cesium1.74) 1.搭建VUE项目 使用vue-cli工具创建一个vue项目:( 确保已安装node.js ) vue init webpack cesiumtest 2.用webstrom打开项目(其他编码工具也可以) 3.安装cesium 在配置文件package.json,中新加ce

  5. vue项目配置环境变量

    vue项目配置环境变量 配置环境变量官方文档 配置环境变量的两种方式 1.在根目录创建.env文件并创建变量 环境变量的命名必须是:VUE_APP_XXX 环境变量声明方式:“键=值”对 2.配置文件作用范围 3.配置配置文件 1.html中使用环境变量 2.组件中使用环境变量 //.

  6. Vue echarts4 热力图

    Vue echarts4 热力图 下面图1为echarts官网上的一个实例,简单的利用点坐标进行热力图渲染,略显粗糙,不是很符合项目要求,图2为在echarts gallery上找到的一个热力图实例。 下面为图2的配置项: var axisdata = [];for (var i = -5; i 5; i++) { axisdata.p

  7. vue中使用antv G6 的树图TreeGraph (紧凑树)①【新手学习向记

    vue中使用antv G6 的树图TreeGraph (紧凑树)①【新手学习向记录】 目前实现了两点: 1. 根据准备好的数据生成树形图 2. 根据数据数值改变节点以及节点文本颜色 百度上关于g6树形图的文章挺少的,因为g6功能很齐全非常庞大 (非常用心的在做图表,真的好用)

  8. 前端vue excel导出数据流

    前端vue excel导出数据流 项目中有一个导出功能的实现,用博客来记录一下。因为需求对导出表格的数据格式和样式有要求,所以这个导出功能放到后端来做,而且后端返回的是数据流,所以需要处理成想要的表格并导出来。 先看下效果图: 页面效果: 点击 导出Exce