当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue的自定义组件及在script中引用图片

vue的自定义组件及在script中引用图片

2020年07月24日  | 移动技术网IT编程  | 我要评论

vue自定义组件及在script中引用图片详解

首先要将新建的文件放在components文件夹中在这里插入图片描述

然后回到app.vue中
在这里插入图片描述
在app.vue中引用组件
我们以新建的Header.vue为例

important Hearder from './components/Header.vue'

在这里前面的的Hearder的意思是别名，叫什么都可以，后面的路径是我文件的路径，大家可以写自己相对应的组件路径
在这里插入图片描述
在data中的components中声明组件，里面的名字就是别名
在这里插入图片描述
然后在上面就可以用组件名再使用组件
所有的内容都写在了，components文件夹下的文件里，包括div、script 和css样式，在主页面只需要引用就可以

ps：在script中引用图片的方法
1.第一种方法
<template>
  <div>
    <img :src="img" />
  </div>
</template>
<script>
data()
{
return{
   img:require("图片路径")
      }
}
</script>

注意：div中img的src前面是冒号，src中的名称要与data中的img一致

2.第二种方法（第二种方法和引用组件非常相似）

首先引用图片（import）

<template>
  <div>
     <img :src="img" />
  </div>
</template>
<script>
import logo from "../assets/logo.png"
data(){
  return{
    img:logo
  }
}
</script>

注意：return中的img后面的logo要与引用的logo名称一致，而img这个名称要与div的img中的src引用的一致

根据自己的思路走的，如有不对，欢迎指正！！！

本文地址：https://blog.csdn.net/princess_Wuyou/article/details/107542918

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网