VueCLI核心知识1:ref属性、props配置、mixin混入

1 ref 属性

ref属性类似于js原生获取DOM元素





总结:

VueCLI核心知识1:ref属性、props配置、mixin混入_第1张图片


 

2 props 配置

2.1 实现父组件向子组件传递信息

1. App组件向Student传递信息VueCLI核心知识1:ref属性、props配置、mixin混入_第2张图片


2. Student组件接收,就可以直接使用了。接收方式有3种






2.2 实现子组件向父组件传递信息

这个需要在父组件中定义一个回调函数,然后将这个函数传递给子组件,子组件调用这个函数,然后父组件就可以收到子组件传递哦过来的参数,由此实现了子组件向父组件传递信息

1. App组件向School组件传递函数,注意这边要用数据绑定,传递的是个函数表达式

VueCLI核心知识1:ref属性、props配置、mixin混入_第3张图片


2. School组件接收,并且调用函数

VueCLI核心知识1:ref属性、props配置、mixin混入_第4张图片


 总结:

VueCLI核心知识1:ref属性、props配置、mixin混入_第5张图片


3 mixin混入

功能:把多个组件共用的配置提取成一个混入对象

第一步:定义混入

VueCLI核心知识1:ref属性、props配置、mixin混入_第6张图片


第二步:使用混入

1. 全局使用

VueCLI核心知识1:ref属性、props配置、mixin混入_第7张图片

2. 局部使用

VueCLI核心知识1:ref属性、props配置、mixin混入_第8张图片


总结:

VueCLI核心知识1:ref属性、props配置、mixin混入_第9张图片


你可能感兴趣的:(Vue,vue.js,javascript)