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

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引用的一致

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