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

vue父子组件传值:详解父组件向子组件传值(props)vue父子组件传值:父组件向子组件传值(props)定义父组件2.定义子组件关键点:1.父组件想要向子组件传值,那么需要在子组件引入的地方绑定要传的值,并且要在父组件中引入子组件。2.绑定的值可以是一个自定义属性来存放父组件向子组件传递的数据。3.子组件使用props属性接收,然后可以直接在页面上以这个形式“{{}}”引用1.父组件代码如下:<template><div>父组件:<inputtype=”text”v-mode

大家好,又见面了,我是你们的朋友全栈君。

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

1.定义父组件

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

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

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

父组件如下:

在这里插入图片描述

2.定义子组件

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

写法是:

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

所以在这里是:

 props: { 
   
      inputName: String,
      required: true
    }

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

子组件如下:

在这里插入图片描述

代码:

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>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/135092.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 商业银行业务架构图模板_我国商业银行组织架构

    商业银行业务架构图模板_我国商业银行组织架构 

    2022年10月12日
  • 字符串和时间转换sql「建议收藏」

    字符串和时间转换sql「建议收藏」oracle:当前时间:sysdate–dual(Oracle中的一张内部表,只有一行一列,一般用作特定查询)时间转字符串:to_char(date,format)selectto_char(sysdate,‘yyyy”年”mm”月”dd”日”’)时间转字符串fromdual;2019年04月18日字符串转时间:to_date(str,format)…

  • 《剑指offer》–二维数组中的查找、从头到尾打印链表、重建二叉树、旋转数组的最小数字

    《剑指offer》–二维数组中的查找、从头到尾打印链表、重建二叉树、旋转数组的最小数字

  • 圆柱体积立方计算公式_圆的体积公式怎么算

    圆柱体积立方计算公式_圆的体积公式怎么算圆柱的体积=底面积x高,即V=S底面积×h=(π×r×r)h。假设圆柱的底面半径为2米,高为2米,则此圆柱的体积为:8π立方米。再根据1立方米=1000立方分米,转换成立方分米。其他转换类似。圆柱体是由两个底面和一个侧面组成的。在同一个平面内有一条定直线和一条动线,当这个平面绕着这条定直线旋转一周时,这条动线所成的面叫做旋转面,这条定直线叫做旋转面的轴,这条动线叫做旋转面的母线。扩展资料:圆柱的性…

  • winscp登录主机拒绝_winscp连接被拒绝怎么解决[通俗易懂]

    winscp登录主机拒绝_winscp连接被拒绝怎么解决[通俗易懂]解决方法:1、使用“sudoufwdisable”命令关闭防火墙;2、使用“sudo/etc/init.d/sshrestart”命令开启远程服务;3、打开22端口号。本教程操作环境:RedHatEnterpriseLinux6.1系统、DellG3电脑。winscp连接被拒绝可以尝试以下方法:1)开启|关闭防火墙(这里需要关闭)sudoufwenable|disable2…

  • Mysql 多表查询详解

    Mysql 多表查询详解纸上得来终觉浅1.前言:上篇讲到Mysql中关键字执行的顺序,只涉及了一张表;实际应用大部分情况下,查询语句都会涉及到多张表格:1)多表连接有哪些分类;2)针对这些分类有哪些连接方法?3)这些连接方法分别作用于哪些应用场景?这篇针对这三个点通过实例来讲述,目的是穷尽所有的场景和所有的方法,并且对每个方法的使用做实例。2.假设有两张表格A和B,把表格当作一个集合,那么表格中

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号