Vue 单文件组件详解<1>--简单上手

说明：不知道是语法糖的问题还是脚手架的编译限制，在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{
        components:{
              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上的所有属性来完成不同种变化。