Vue知识点整理（三）- Vue脚手架（2）- render函数、ref属性、props配置、mixin混入

目录

一、render函数

二、关于项目内不同版本的Vue

三、修改默认配置（一般不修改）

四、ref属性

五、props配置

六、mixin混入

---

一、render函数

完整render函数写法

new Vue({
  render(createElement) {
    return createElement("元素名", "内容");
  },

精简写法

  // render采用箭头函数，省略小括号，并且由于箭头函数只有一句函数体，可省略掉return，若参数内容为组件，可只传一个参数，没必要写具体内容
  render:自定义参数名 => 自定义参数名(组件名),

二、关于项目内不同版本的Vue

1. vue.js 与 vue.runtime.xxx.js

（1）vue.js是完整版的Vue，包含：核心功能 + 模板解析器

（2）vue.runtime.xxx.js 是运行版的Vue，只包含：核心功能；不包含模板解析器

2. 因为vue.runtime.xxx.js 没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的 createElement函数 去指定具体内容

三、修改默认配置（一般不修改）

Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpack 配置，需在终端执行：

vue inspect > output.js

使用 vue inspect > output.js 可以查看到Vue脚手架的默认配置

当然输出的output.js相当于只是一个webpack配置展示副本，只能作为一个查看文件，在里面进行修改并不能实际地去修改webpack相关配置

如果需要修改默认配置，则可以采用 Vue官方提供工具 Vue CLI，即可以直接查看文件vue.config.js（创建时有生成的话，未生成可直接创建，再由官方 Vue CLI 引入相关内容）

例如：关闭语法检查操作

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  // 关闭语法检查
  lintOnSave: false,
});

使用  vue.config.js 可以对脚手架进行个性化定制，具体内容见 Vue CLI

四、ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：
   1. 打标识，例如：<h1 ref="xxx">...</h1> 或 <组件名 ref="xxx"></组件名>
   2. 获取：this.$refs.xxx

<template>
  <div>
    <h1 v-text="msg" ref="title">宫崎英高跌上神坛</h1>
    <button @click="showDOM" ref="btn">点击输出DOM元素</button>
    <Game ref="gm"></Game>
  </div>
</template>

<script>
import Game from "./components/Game.vue";
export default {
  name: "App",
  components: { Game },
  methods: {
    showDOM() {
      console.log(this.$refs.title);  //  真实DOM元素
      console.log(this.$refs.btn);  //  真实DOM元素
      console.log(this.$refs.gm); //  Game组件的实例对象
    },
  },
};
</script>

<style></style>

五、props配置

功能：让组件接收外部传过来的数据

        （1）传递数据：

<Demo name="xxx"/>

如果name的值为表达式则需要v-bind绑定

<Demo :name="..."/>

        （2）接收数据：

                第一种方式（只接收）：

props:['name']

                第二种方式（限制类型）：

props:{
    name:String,
    age:Number,
}

                第三种方式（限制类型、限制必要性、指定默认值）

props:{
    name:{
        type:String, // 类型
        required:true, // 必要性
        default:'xxx' // 默认值
    }
}

注意：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，

若业务需要确实要修改，那么需要赋值props的内容到data中一份，然后去修改data中的数据

简单案例练习

用props配置外部传过来数据的类型，必要性或默认值，且可以通过点击事件修改数据

App.vue

<template>
  <div>
    <Player name="太阳骑士" status="无用之人"></Player>
  </div>
</template>

<script>
import Player from "./components/Player.vue";
export default {
  name: "App",
  components: { Player },
};
</script>

<style></style>

Player.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>游戏名：{{ name }}</h2>
    <h2>初始身份：{{ status }}</h2>
    <h2>等级：{{ myLevel }}</h2>
    <button @click="upLevel">提升等级+1</button>
  </div>
</template>

<script>
export default {
  name: "Player",
  data() {
    return {
      msg: "魂三老玩家",
      myLevel: this.level,
    };
  },

  methods: {
    upLevel() {
      this.myLevel++;
    },
  },
  // 简单声明
  // props:['name','status','level'],

  // 接收的同时对数据进行类型限制
  // props:{
  //   name:String,
  //   status:String,
  //   level:Number,
  // },

  // 接收的同时对数据：进行类型限制+默认值的指定+必要性限制
  props: {
    name: {
      type: String,
      required: true,
    },
    status: {
      type: String,
      required: true,
    },
    level: {
      type: Number,
      default: 1,
    },
  },
};
</script>

<style></style>

六、mixin混入

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

使用方式：

        第一步：定义混合，例如

{
    data(){...},
    methods:{...},
    ...
}

        第二部使用混入，例如：

                （1）全局混入：Vue.mixin(xxx)

                （2）局部混入：mixins:['xxx']

简单案例练习

点击命名称弹出提示框

Player.vue

<template>
  <div>
    <h2 @click="showName">玩家名：{{ name }}</h2>
    <h2>初始身份：{{ status }}</h2>
  </div>
</template>

<script>
import { hunhe } from "../mixin";

export default {
  name: "Player",
  data() {
    return {
      name: "太阳骑士",
      status: "预言家",
    };
  },
  mixins: [hunhe],
};
</script>

<style></style>

Game.vue

<template>
  <div>
    <h2 @click="showName">游戏名：{{ name }}</h2>
    <h2>创作者：{{ creater }}</h2>
  </div>
</template>

<script>
import { hunhe } from "../mixin";

export default {
  name: "Game",
  data() {
    return {
      name: "艾尔登法环",
      creater: "宫崎英高",
    };
  },
  mixins: [hunhe],
};
</script>

<style></style>

mixin.js

// 分别暴露
export const hunhe = {
  methods: {
    showName() {
      alert(this.name);
    },
  },
};