Vue第三方组件使用

文章目录

一、组件传值

1、父组件与孩子组件传值

  • 在孩子组件中定义props属性,里面定义好用于接收父亲数据的变量。
    孩子组件是Movie

    Movie.vue。注意看在Movie组件里面有props对象中的title和rating属性用于父亲使用。
html 复制代码
<template>
    <div>
        <h1>{{title}}</h1>
        <span>评分{{ rating }}</span>
        <button @click="show">点击收藏</button>
    </div>

</template>

<script>
export default {
    name:"Movie",
    // props将属性暴露给外界进行赋值
    props:["title","rating"],
    methods:{
        show(){
            alert("EcustGood")
        }
    }
}
</script>
  • 在父亲组件中使用孩子组件,使用时传入参数。
    比如我在App.vue里面使用孩子组件时如下。我的孩子组件中的props就是title,rating。我传入的就是这两个值。
html 复制代码
<Movie v-for="movie in movies" :key=movie.id :title="movie.title" :rating="movie.rating" ></Movie>

App.vue

html 复制代码
<template>
  <div id="app">
    <Movie v-for="movie in movies" :key=movie.id :title="movie.title" :rating="movie.rating" ></Movie>
  </div>
</template>

<script

import Movie from './components/Movie.vue';
import Hello from './components/Hello.vue';

export default {
  name: 'App',
  components: {
    Movie,
    Hello
  },
  data(){
        return{
            movies:[
                {id:"001",title:"阿甘正传",rating:"9.8"},
                {id:"002",title:"肖申克的救赎",rating:"9.9"},
                {id:"003",title:"星际穿越",rating:"9.6"}
            ]
        }
    }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

二、elementui组件使用

elelmentui官网

首先要在项目目录下安装elementui

shell 复制代码
npm i element-ui -S

能够看到package.json文件里。

另外,项目中的node_modules文件夹都是我们安装的第三方依赖库,这个可以删除,只要package.json文件还在npm install

第二步在main.js中全局注册elementui组件。

html 复制代码
//注册elementui组件
Vue.use(ElementUI)

第三步就可以直接在elelmentui官网打开一个组件使用即可。直接把代码复制到组件里面即可。

三、fontawesome图标

官网网址

安装

复制代码
npm install font-awesome

使用,在main.js中引入,在任何地方使用。

py 复制代码
import 'font-awesome/css/font-awesome.min.css'

用法很简单,在哪用直接用就好

html 复制代码
<i class="fa fa-automobile"></i>
相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js