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: '<App/>'

• 因为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

  • <template>
      <div class="hello">
        <!-- ref可以用id替换,这里不做演示。 -->
        <h1 v-text="mas" ref="mas"></h1>
        <button @click="show">点击按钮显示上方的Dom元素</button>
        <!--假设有一个子组件为Student, 加入ref后ref会收集子组件Student的VueComponent。不在是当前Select组件的VueCoponent。-->
        <Student/ ref="stu">
      </div>
    </template>
    ​
    <script>
    import Student from "xxxxx";
    export default {
      name: 'Select',
      components: {Student},
      data () {
        return {
          mas: '啦啦啦'
        }
      },
      methods:{
        show(){
          // 输出this看组件实例对象VueComponent
          console.log(this);
          // 通过VueComponent找到mas并将其输出到控制台
          console.log(this.$refs.mas);
        }
      }
    }
    </script>

  • 查找ref收集的mas

  • 

_props配置

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

• 组件的复用性

• 下面代码为父组件的代码

• <template>
    <div>
      <!-- 组件的复用性。-->
      <!-- 需要使用子组件的属性名mas、address、age则需要使用在子组件用props来注册。在将所要修改的属性值像如下代码传给子组件  -->
      <useSelect mas="李四" address="新加坡" :age="18+1"/>
      <!-- 下面的代码age类型为Number。给age绑定v-bind则是把""中的内容当作表达式直接计算。不绑定则为字符串 -->
      <useSelect mas="李四" address="新加坡" age="18+1"/>    
    </div>
  </template>
  ​
  <script>
  import useSelect from '../components/useSelect.vue'
  export default {
     name: 'School',
    components: {useSelect},
  </script>

• 下面组件为子组件,当父组件想调用的属性名，需要在子组件中注册后。子组件返回属性名给父组件。子给父传数据

• 如果data中有数据,props传来的数据优先使用

• <template>
    <div class="hello">
      <h1 >名字为：{{ mas }}</h1>
      <h1 >地址：{{ address }}</h1>
      <h1 >年龄：{{ age }}</h1>
    </div>
  </template>
  ​
  <script>
  export default {
    name: 'useSelect',
      
    // 注册组件的第一种写法：
    props:['mas','address','age']
    // 注册组件的第二种写法
     props: {
      mas:{
        type:String,//mas的类型是字符串
        required:true//mas是必要的,必须要传递过来。不然报警报
      },
      age:{
        type:Number,
        default:19//默认值
      },
      address: {
        type: String,
        required: true//默认值
      },
    }  
    // 注册组件的第三种写法
     props: {
       mas:String,
       age:Number,
       address:String
     }
  }
  </script>