Vue.js &4 @慕课网

组件使用的细节点

• 使用is标签解决标签渲染中的bug
• • 表格的模板嵌套问题

    

解决方法( < ul>< select> 一样受用）

注： 子组件中定义data时，必须以函数的形式定义（子组件需要一个独立的数据存储）

• • 在vue中操作DOM（this.$refs.'name'）
    写在标签上时：通过ref 来获取DOM节点
    写在组件上时：通过ref 来获取子组件的引用

父子组件的数据传递

• 父组件向子组件传递数据（通过属性的形式）
  
  prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项 声明 “prop”

注： 单向数据流：父组件可以通过属性的方式向子组件传递数据，且数据可以随意修改。但子组件绝对不可以修改父组件传递的内容

• 子组件向父组件传递数据

组件参数校验与非props特性

• 组件参数校验

  

• 非props特性
  1. 无法在子组件中直接使用
  2. 该属性会展示在子组件最外层的DOM 标签的html属性中
  
  补： 父子组件通过prop产生关联，子组件直接通过插值表达式，添加数据。不会显示在DOM标签中

给组件绑定原生事件

非父子组件间的传值(Bus/总线/发布订阅者模式/观察者模式)

*网页的每个部分都有各种组件组成

在Vue中使用插槽（slot）

• < slot>< /slot>定义插值
• < slot>< /slot>定义默认值

• 给插槽命名使其在对应地方显示

  

Vue中的作用域插槽(子组件循环的DOM结构，依靠于外部的设定)

-父组件调用子组件时，给子组件传入一个插槽（作用域插槽）
1. < tempalte>< /template>结构
2. 告诉子组件如何展示

动态组件与v-once指令

• 根据is 中的内容动态的加载页面

• v-once指令

  

  总结：
• props:组件的参数传递
• slot:插槽在组件抽象设计中的应用
• 自定义事件:父子组建的通信方式