springboot和vue2：十、vue2和vue3的差异+组件间的传值（自己给自己传值、父组件给子组件传值）+element-ui+第三方图标库

首先用vue-cli创建一个vue2的项目。

vue2和vue3的差异

main.js的语法有所差别。

vue2是

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

vue3是

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

自定义组件的template有所差别

vue2自定义组件的template中所有标签必须在同一个父标签下，即只有一个根标签。所以一般写的时候都写一个div标签包裹着。
vue3没有该限制。

组件间的传值

组件自己内部data提供数据给自己

譬如现在自定义了一个Movie组件，上面的template视图从下面的script中导出的data中拿值。

<template>
    <div>
        <h1>{{ title }}</h1>
    </div>
</template>

<script>
export default {
    name: "Movie",
    data: function () {
        return {
            title: "金刚狼"
        }
    }
}
</script>

父组件通过prop的方式传值给子组件

自定义Movie组件中是这样的代码

<template>
    <div>
        <h1>{{ title }}</h1>
    </div>
</template>

<script>
export default {
    name: "Movie",
    props: ["title"],
    data: function () {
        return {
        }
    }
}
</script>

使用Movie的父组件（一般都是App.vue）即可在使用Movie标签的同时直接传值

<template>
  <div id="app">
    <Movie :title="'金刚狼'" ></Movie>
  </div>
</template>

**注意：金刚狼一定要用一对单引号包裹起来，否则页面不会显示数据，只会控制台warning如下：

main.js:4 [Vue warn]: Property "金刚狼" was accessed during render but is not defined on instance. 
  at <App>

兄弟组件通过Vuex等统一数据源共享数据

在后面的博客会详细介绍。

element ui

Element是国内饿了么公司提供的一套开源前端框架，简洁优雅，提供了Vue、React、Angular等多个版本。

• 文档地址：https://element.eleme.cn/#/zh-CN/
• 安装：npm i element-ui
• 引入 Element：
  

第三方图标库

Font Awesome提供了675个可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改。

• 文档地址：http://fontawesome.dashgame.com/
• 安装：npm install font-awesome
• 使用：import ‘font-awesome/css/font-awesome.min.css’