vue2 vue3 组件传值的方式

文章目录

  • 组件间传值的方法
    • 总结
    • 什么是单向数据流
    • 父组件给子组件传值
      • 方式1: props
        • options API写法
          • default默认值
        • composition API | defineProps编译宏
          • props类型声明的默认值 | widthDefaults编译宏
      • 方法2:组件身上的属性与事件
        • vue2 $attrs + $listeners
        • vue3 useAttrs方法
      • 方法3: $parent + defineExpose编译宏 | 子组件内部获取到父组件实例
      • 方法4:插槽 结构父 -> 子
    • 子组件给父组件传递
      • 自定义事件与原生DOM事件
      • 方法1:自定义事件/原生DOM事件 + emit 方法
        • options API写法 | $emit()
        • composition API写法 | defineEmits编译宏
      • 方法2 ref + defineExpose编译宏 | 父组件获取子组件的值/方法
    • 父子组件数据同步
      • vue2 v-model的原理
      • vue2 sync 修饰符原理
      • vue3 v-model原理
    • 祖先组件向子孙组件传值
      • provide/inject
        • vue2中的使用
        • vue3中的使用

组件间传值的方法

总结

  • 父组件传子组件
    • 父组件在使用子组件时通过设置属性传值,子组件使用props接收
  • 子组件传父组件
    • 自定义事件 父组件将自定义事件传递给子组件,子组件emit接受

什么是单向数据流

  1. 什么是单向数据流
    数据流是指组件之间数据的流向,单向数据流指数据只能从父组件向子组件传递,子组件无法改变父组件的props,如果想修改有其他的方式。
  2. 为什么不能是双向的
    父组件的数据发生改变,会通过props来通知子组件自动更新。 防止多个子组件都尝试修改父组件状态时,导致数据混乱

单向数据流的好处

  • 单向数据流会使所有状态的改变可记录、可跟踪,源头易追溯;
  • 所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性。

父组件给子组件传值

方式1: props

通用说明
1.props是只读属性,子组件不可以修改传入的值。
2.props方式的传值是浅拷贝

传递方法
1.父组件上使用子组件,通过子组件的属性进行传值。
2.子组件props接受父组件的传值。

options API写法

  • 子组件通过props参数接收数据,数据优先被设置在vc组件上(vc.数据)
    • 如果子组件不使用props,子组件的$attrs里会存储传过来的属性,子组件的vc实例上不会存储。
    • 如果子组件使用props,子组件的vc实例上会直接存储传过来的属性,子组件的$attrs里不会存储
//1.父组件通过属性传值
<Student :name=name :sex=sex :age=age/>
//option API
//写法1:子组件接收值,简单接收
props:['name','sex','age']

//写法2:子组件接收值,设置传来值的类型
props:{
	name:String,
	sex:String,
	age:Number	
}

//写法3: 子组件接收值,完整写法
props:{
	name:{
		type:String,
		required:true //是否必须
		 default: "table" 
	},
	age:{
		type:Number,//类型
		default:99 //默认值
	},
	 rowClick: {
      type: Function,
      default: () =>{}
    },
     columns: {
      type: Array,
      default:() =>[]
    },
    api: {
      type: Object,
      default:()=>({})
    },
}
default默认值

1.使用default定义默认值时,如果父组件有传值,则用父值渲染。如果父组件没有传值,则使用默认值。
2.没有定义默认值时,如果父组件有传值,则用父值渲染。如果父组件没有传值,则使用的是该类型的默认值。

String ''
Number 0
Array []
Object {}

props 默认值只在没有传参时才会被读取,如果传入的是不完整对象,并不会为对象没有值的属性补齐默认值

vue2 vue3 组件传值的方式_第1张图片

所有props默认值(vue2和vue3)的写法都需要遵守
基本数据类型:直接赋值
对象数据类型:用函数赋值()=>{}

如果直接采用{}和[],当多个使用该组件的父组件都没有传递props而使用默认值。假设其中一个父组件修改了默认的值(不推荐,会报警告),其他的父组件由于指向的是同一个内存中的引用地址,也会发生改变。
使用了函数的形式去返回,保证每次函数执行出来的都是返回一个新的对象。

composition API | defineProps编译宏

defineProps()不需要定义和引用就可以直接使用
返回值:返回一个由接受属性组成的代理对象

说明

  • definePropsdefineEmits 都是只能在

你可能感兴趣的:(Vue/React,前端,javascript,ui)