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上的所有属性来完成不同种变化。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏王二麻子IT技术交流园地

八、VueJs 填坑日记之参数传递及内容页面的开发

我们在上一篇博文中,渲染出来了一个列表,并在列表中使用了router-link标签,标签内的:to就是链接地址,昨天咱们是<router-link :to="'...

2287
来自专栏小李刀刀的专栏

[译]对《优化浏览器渲染》的补充

ISD Webteam的大布同学(twitter:@tc_bryanzhang)在2010年1月翻译了google Page Speed系列中的Optimize...

3176
来自专栏守望轩

Visual Studio 2008 每日提示(十一)

#101、块缩进和智能缩进的差异 原文链接:what’s the difference between smart indenting and block i...

2933
来自专栏前端杂谈

使用vue开发项目需要注意的问题和可能踩到的坑

最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下:

1082
来自专栏挖坑填坑

angular页面打印局部功能实现方法思考

在页面显示的时候是分页现实的,当前页面只有10条数据,但是打印需要打印完整的100条数据。 并且在当前页面包含了表格之外的标题,菜单等其他元素。 后天api...

1032
来自专栏DeveWork

WordPress登陆文件wp-login.php添加相关参数,安全有保障

在几个月前的WordPress 界被攻击闹得沸沸扬扬的时候,Jeff在本站DeveWork.com 分享了《修改WordPress登陆文件名wp-login.p...

2356
来自专栏技术博文

PHP抓取采集类snoopy

snoopy是一个php类,用来模仿web浏览器的功能,它能完成获取网页内容和发送表单的任务。官方网站 http://snoopy.sourceforge.ne...

7068
来自专栏黑白安全

自助建站逻辑实现功能

PHP和Apache实现多用户自助建站 安装说明请查看附件 项目介绍 PHP+Apache实现多用户自助建站的系统Demo,只实现基本功能

2731
来自专栏知晓程序

开发 | 如何在微信小程序的页面间传递数据?

我们在之前发布过小程序页面传值方法的简单介绍,说明了在小程序开发中,两种常见的页面之间传值方法。

1112
来自专栏Aloys的开发之路

Eclipse相关问题

MANIFEST.MF文件 在Eclipse的.classpath和runableX.jar中的MANIFEST.MF文件中都指定了可依赖jar包的顺序,所以只...

2806

扫码关注云+社区

领取腾讯云代金券