Vue中Render函数、_ref属性、_props配置的使用

Render函数

• 由于导入的vue为vue.runtime.xxx.js是运行版的vue.只包含：核心功能：没有模板解析器

• 完整版的Vue为vue.js包含：核心功能+模板解析器

• vue.runtime.esm.js中的esm为ES6的模块化

• //导入的vue并非完整的vue，这样做的好处是少了模板解析器。能减少内存。
  import Vue from "vue"
  //由于导入的vue并不完整，无法解析template模板。故下面的代码无法实现
  components: { App },
  template: ''

• 因为vue.runtime.xxx.js没有模板解析器，所有不能使用template配置项，故须使用render函数接收的createElement函数来指定具体内容

• //下面为render的原型,createElement()括号内的第一位置为元素,元素需要加入''。第二个为该元素所呈现的内容
     render(createElement){
     return createElement('h1','你好啊')
     }

  • 下面的代码为演变为脚手架中的render

• // 没有用到this可以写成箭头函数,=>左边目前一个元素，可以把括号去掉。createElement可以用字母随意替换。花括号的内容和   //return直接省去。由于App为组件不是元素故不加''
    render:h => (App)

  ref属性

  • 用来给元素或子组件注册引用信息（id的替代者）

  • ref应用在html标签上的获取的是真实的DOM元素，应用在组件标签上是组件的实例对象（vc)

  • 使用方式：

  • 获取ref收集的元素或子组件：this.$refs.xxx。例如：this.$refs.stu

  • 
    ​
    

  • 查找ref收集的mas

  • 

 

_props配置

• 需求：在父组件中使用子组件的属性名、属性值只需修改使用。

• 组件的复用性

• 
  ​
  

• 在父组件中调用的属性名，需要在子组件中注册

• 
  ​