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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 三分钟明白 Activity工作流 — java运用[通俗易懂]

    三分钟明白 Activity工作流 — java运用[通俗易懂]一、什么是工作流  以请假为例,现在大多数公司的请假流程是这样的  员工打电话(或网聊)向上级提出请假申请——上级口头同意——上级将请假记录下来——月底将请假记录上交公司——公司将请假录入电脑  采用工作流技术的公司的请假流程是这样的  员工使用账户登录系统——点击请假——上级登录系统点击允许  就这样,一个请假流程就结束了  有人会问,那上级不用向公司提交请假记录?公司不用将记录录入电脑?答案是

    2022年6月11日
    51
  • C语言流水灯程序_51流水灯c语言程序

    C语言流水灯程序_51流水灯c语言程序0x01是数字,十六进制的数字。其结果等效于1。在数学上就是1,只不过在计算机上用2进制和十六进制较多,所以用十六进制表示。if(i&0x01)printf("奇数\n");elseprintf("偶数\n");system("pause");.0x01代表十六进制数也就是十进制数的01,&是把这些数转化为二进制数然后进行按位与运算info>>(…

    2025年6月8日
    0
  • ICE的服务器对象实现「建议收藏」

    ICE的服务器对象实现「建议收藏」1、需要增加一个类继承至生成的接口类,并实现接口类的虚方法。2、创建实现类的对象3、调用adpater的add方法将创建的对象绑定到adapter中,并传入一个全局唯一标示符,该唯一标示可以通过如下方法生成:  adapter->add(hello,communicator()->stringToIdentity(“hello”));  adapter->addWithUUI

    2022年5月27日
    32
  • MATLAB 数学应用 微分方程 时滞微分方程 具有常时滞的DDE「建议收藏」

    MATLAB 数学应用 微分方程 时滞微分方程 具有常时滞的DDE「建议收藏」本文讲述了如何使用dde23对具有常时滞的DDE(时滞微分方程)方程组求解。方程组为:y1′(t)=y1(t−1)y’_1(t)=y_1(t−1)y1′​(t)=y1​(t−1)y2′(t)=y1(t−1)+y2(t−0.2)y’_2(t)=y_1(t-1)+y_2(t-0.2)y2′​(t)=y1​(t−1)+y2​(t−0.2)y3′(t)=y2(t)y’_3(t)=y_2(t)y3′​(t)=y2​(t).t≤0的历史解函数是常量y1(t)=y2(t)=y3(t)=1y_1(t)=y

    2022年9月28日
    0
  • 以下哪些字符可以用于定义Python标识符_if可以作为用户标识符吗

    以下哪些字符可以用于定义Python标识符_if可以作为用户标识符吗1.有效的Python标识符规则:(1)长度是任意长度;(2)标识符不能具有相同的名称作为关键词;(3)在Python的版本,用一个ASCII字母或下划线标识符开始,并且可以紧随其后的是字母,数字,下划线;在Python中,标识符ASCII字母、下划线和大多数非英语语言字母,只要用Unicode编码的字母可以作为主要人物,和随后的字符可以是任何主角,或任何的字符进行技术改造,包括任何在Unico…

    2022年9月10日
    0
  • python字典详解_python字典get方法

    python字典详解_python字典get方法字典字典的key和value一一对应的,字典是可变的,也是有序的(python3.6版本开始字典有序),可迭代的增加元素当key不存在时,直接赋值a={"status"

    2022年7月30日
    7

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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