Vue中父组件和子组件的关系

这里写目录标题

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

一、父组件与子组件

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

在App.vue中导入了demo组件、注册了局部组件,并且用了demo的组件
App.vue是父组件,demo.vue是子组件
Vue中父组件和子组件的关系_第1张图片

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

Vue中父组件和子组件的关系_第2张图片
Vue中父组件和子组件的关系_第3张图片

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

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

1、子组件