说明：不知道是语法糖的问题还是脚手架的编译限制，在vue的webpack项目上使用单文件组件特别麻烦，一般的开发者只会接触通过Vue.components()静态方法来构建简单的组件，但是随着业务逻辑复杂化，单文件组件逐渐对代码整体解耦实现了很大的帮助，现在不得已用一篇文章详解单文件组件相关问题以及用法。
1、从webpack项目目录结构来解释什么是单文件组件
vue的webpack项目简单的源码结构.png
vue 的webpack的结构非常简单，简单的一眼就可以知道每个目录下是干啥的，在components目录下就有属于我们想要详细解析的内容，这两个vue文件即为单文件组件。
2、使用单文件组件实现简单的组件使用
一般很多博客都用vue-loader来做文件组件的注入或者直接通过import指令导入对应的组件，但是他们写法相对非常复杂，各种配置，而且整体性欠缺，特别是在正式版本上可能因配置问题而造成使用失效。这个时候需要我们common.js写法出场了，虽然它只是一个过渡者，但是整体代码简洁，思想非常好。
2.1、注册声明：
<!-- BaseView.vue -->
<script>
export default{
comments:{
yourselfTag:require('./YourselfTag.vue').default
}
}
</script>
2.2、父组件使用：
<!-- BaseView.vue -->
<template>
<div>
<yourself-tag></yourself-tag>
</div>
</template>
通过以上简短的方式，我们完成了单文件组件简单的使用。
3、标签化赋值利用props
在很多情况下我们需要对标签内部的变量赋值，这个时候该怎么弄呢，在这里我也是仔细翻阅了官方文档，最后还是在源码中找到了答案：
点击comments进入的源码.png
根据源码发现最终调用的.default对应的就是这个方法，在这个方法中我们发现无论那种渲染都会启用.vue单文件组件下的props作为参数来渲染对应的单文件组件内部的内容。那么我们只用声明props来进行标签上传递值就行了。
赋值代码：
3.1、单文件组件内部声明props
<!-- YourselfTag.vue -->
<script>
export default{
props:['yourAttribute']
}
</script>
3.2、父组件上嵌入标签
<!-- BaseView.vue -->
<template>
<div>
<yourself-tag yourAttribute="vue"></yourself-tag>
</div>
</template>
3.3、子组件使用此声明属性
<!-- YourselfTag.vue -->
<template>
<div>
<p>{{yourAttribute}}</p>
</div>
</template>
结果显示为 vue
4、标签化初始化url问题
结合第三点所讲的如果在自组件中这样写会遇到一些情况
<!-- YourselfTag.vue -->
<template>
<div>
<img :src="yourAttribute" >
</div>
</template>
此种写法会造成图片显示不了的状况
4.1、发生原因
通过浏览器运行，会从debug中得到当前下的element的值：
<img src="../assets/xxx.png"
但是默认情况下直接使用此标签，vue的编译器会将其编译成如下标签:
<img src="xxxxxxxxxxxxxxxxxxxx"base64的解析地址。
于是我们明白了，其直接导入进来，vue在watch视图加载的时候没有进行对src进行编译，而是直接使用其导入的值的，调过了编译一环，咋办呢？
4.2、解决方法--插值器使用
slot这个为vue的插值器，可以将标签动态插入给对应的组件，于是我们这样写，在主组件下：
<!-- YourselfTag.vue -->
<template>
<div>
<slot name = "image"></slot>
</div>
</template>
------------------------------------------------------
<!-- BaseView.vue -->
<template>
<div>
<yourself-tag>
<img src="../assets/xxx.png" slot="image">
</yourself-tag>
</div>
</template>
通过这样的插值器，我们可以动态设置这img上的所有属性来完成不同种变化。
网友评论
@stormKid