码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • Vue中父组件和子组件的关系


    这里写目录标题

    • 一、父组件与子组件
      • 认识父组件、子组件案例1
      • 认识父组件、子组件案例2
    • 二、父组件往子组件中传数据
      • 1、子组件
      • 2、父组件(App)
      • 3、实现步骤
        • 1、子组件内部定义props接收传递过来的值
        • 2、父组件在使用子组件时通过属性将值传递给子组件
        • 子组件
        • 父组件(App)
        • 特别注意:子组件中不能操作父组件中传递过来的数据,只能访问
    • 三、子组件往父组件中传数据
      • 实现步骤:
        • 1、子组件中定义一个事件
        • 子组件
        • 父组件
      • 拓展

    一、父组件与子组件

    认识父组件、子组件案例1

    在App.vue中导入了demo组件、注册了局部组件,并且用了demo的组件
    App.vue是父组件,demo.vue是子组件
    在这里插入图片描述

    认识父组件、子组件案例2

    在这里插入图片描述
    在这里插入图片描述

    二、父组件往子组件中传数据

    效果展示:stu1中的参数固定,不能动态变化,缺点很明显

    1、子组件