Vuejs 页面的区域化与组件封装的实现

组件的好处

当我用vue写页面的时候，大量的数据页面渲染，引入组件简化主页面的代码量，当代码区域块代码差不多相同时，组件封装会更加简化代码。组件是Vue.js最强大的功能之一。

组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

我用一个读书软件的图书列表例子：

图书展示页大家可以想想用vue如何实现这个页面的前端页面实现，再来实现逻辑功能；

图片显示的 '推荐图书' 和 '最新图书' 的列表展示是一样的，开始可以用重复的代码把先写好的 '推荐图书' 的代码复制一份就可以轻轻松松实现 '最新图书' 页面

如果其他页面也需要这个展示，或我想代码更加简洁一点，那么来组件如何封装就派上场啦

简要页面：图书列表展示页 - 图书列表组件

|- book.vue // 图书展示页面
 |-- BookList.vue // 图书列列表组件

基础部分相信使用过vue的伙计都知道如何使用，我直接上代码：

创建一个组件 - 注册组件 - 使用组件

// 引入组件
import BookList from '../../components/bookList/BookList.vue';

// 注册组件
components:{
 BookList,
},

// 使用组件
<book-list></book-list>

vue2.0 规定引入组件建议使用驼峰命名，使用时用 - 分开，vue才更好识别

之前没封封装组件的代码就不上传了，直接上代码：

图书列表页 - book.vue

|- book.vue - html 页面
 <template> 
  <div>
  <h2>欢迎来到波波图书馆!</h2>
     
  <!-- 推荐读书 -->
  <section class="box recommend-book">
   <!-- 大家注意 :books 是BookList.vue组件里图书对象数组 heading 是传给组件的标题 -->
   <book-list :books="recommendArray" heading="推荐图书"></book-list>
  </section>

  <!-- 最新图书 -->
  <section class="box update-book">
   <!-- 大家注意 :books 是BookList.vue组件里图书对象数组 heading 是传给组件的标题 -->
   <book-list :books="updateBookArray" heading="最新图书"></book-list>
  </section>

  </div>
 </template>

我是模拟数据，开发过程中是用api接口拿数据的，其实都一样，代码有点多，原理都一样，大家看一下也可以了解一下json的知识

|- book.vue - js 
<script>
 import BookList from '../../components/bookList/BookList.vue';
 export default({
  data(){
    return {

    // 推荐图书
    recommendArray:[
     {
      id:1,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-1',
      book_author:'liangfengbo',
     },

     {
      id:2,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-2',
      book_author:'liangfengbo',

     },

     {
      id:3,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-3',
      book_author:'liangfengbo',

     },
    ],

    // 最新图书
    updateBookArray:[
     {
      id:5,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-5',
      book_author:'liangfengbo',

     },

     {
      id:6,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-6',
      book_author:'liangfengbo',

     },
     {
      id:7,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-7',
      book_author:'liangfengbo',

     },
    ],
   }
  },

  // 引入组件
  components:{
   BookList,
  },

  methods : {
     
  },
 })
</script>

|- book.vue - css
<style>
 *{
  margin: 0;
  padding: 0;
 }
 li{
  list-style:none;
 }
  .box{
  height: auto;
  border-bottom: 1px solid #efefef;
  margin: 10px 0;
  padding: 5px 0;
 }
</style>

组件 - BookList.vue

|- 组件 - BookList.vue - html
<template>
 <div>
  <!-- 头部 -->
  <!--这个是页面传来的标题 -->
  <h3 class="heading">{{heading}}</h3>
  <!-- 列表 -->
  <article class="book-list">
   <!-- 遍历图书数据 -->
   <li v-for="book in books">

    <router-link :to="{ name:'BookDetail',params:{ id: book.id }}">
     ![](book.img_url) <!-- 图书图片 -->
     {{book.book_name}} <!-- 图书名字 -->
    </router-link>

   </li>   
   </article>
 </div>
</template>

|- 组件 - BookList.vue - html

<script>
 export default({
  // props 数据传递的意思
  props:[
   'heading',//标题
   'books',//图书对象数组
  ],
  data(){
   return {
  
   }
  },
  methods : {
     
  },
 })
</script>

|- 组件 - BookList.vue - css

<style scoped>
  /*图书列表*/
 .book-list {
  width:100%;
  height:128px;
  display: flex;
  justify-content: space-around;
 }
 .heading {
  border-left: 4px solid #333;
  margin: 10px 0;
  padding-left: 4px;
 }
 .book-list li {
  width:80px;
  height: 100%;
  flex:1;
  margin:0 10px;

 }

 .book-list li img{
  height: 100px;
  width: 100%;
 }
 .book-list li a{
  text-align: center;
  font-size: 12px;
  text-decoration: none;
  display: inline-block;
  width: 100%;
 }
</style>

全部的代码就在这里啦，大家可以细心发现，组件封装，其实就向我们之前JavaScript函数封装一样，传递参数，接收参数，渲染数据，重复利用，大家可以直接复制代码运行看一下，注释有解释啦。

小干货

父组件调用子组件方法为：

在子组件上写上名字如：

<start-set-timeout seconds=60 ref="contTimer"></start-set-timeout>

调用方法：this.$refs.contTimer.countTime(60)

但是

因为有数据的延迟经常会出现调用子组件的事件出现undefined的事情：

TypeError: Cannot read property 'countTime' of undefined

解决方法是

// 调用时加一个定时器
setTimeout(() => {
 this.$refs.contTimer.countTime(60)
}, 20)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue2.0 自定义组件的方法（vue组件的封装）
Vue项目中封装组件的简单步骤记录
vue封装组件js版基本步骤

转载请注明出处:http://www.lishuoershouche.com/article/20230401/126996.html

随机推荐

简单路由器链路无法工作，如何转到Vuejs 3中的另一个vue页面
我正在遵循一些Vue教程并测试一个项目，我的简单链接(让我们玩吧)不是working.no编译错误。编译成功。只是链接不工作，url也不会改变。现在我被卡住了。请帮帮忙。如果我的英语不好，很抱歉。这是src/views/LandingPag...
结果不在vueJS中用于分页的页面中
我正在使用Bootstrap Vue让一些客户端分页工作，数据来自rest api。到目前为止，页面得到了计算，但结果没有显示在页面上，结果显示在外部，并且没有分页。所以页面会被计算出来，但是结果不在页面上。到目前为止，组件代码是：temp...
Vuejs 页面的区域化与组件封装的实现
组件的好处当我用vue写页面的时候，大量的数据页面渲染，引入组件简化主页面的代码量，当代码区域块代码差不多相同时，组件封装会更加简化代码。组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组...
VueJS始终自动将锐号(#/)附加到所有页面的URL末尾
将VueJS集成到网站后，我发现网站的网址总是以/#结尾。如何将其移除？示例:从www.noti-solutions.com/#/复制至www.noti-solutions.com复制
VueJS -如何通过单击按钮来显示图表，以及最初如何在vue-chartjs中显示页面加载期间的chart1
我正在尝试用点击按钮来显示图表，我已经使用了3个按钮，我还使用了4个单选按钮，就像下面的图像一样。??我实际上是在调用一个API并从那里获取数据。我尝试在函数中传递值，然后尝试在按钮单击中使用相同的值。下面是我的代码：template ...
点击按钮时的Vue.js刷新页面
我想在点击按钮时刷新页面这是按钮在html button v-on:click=getUser() :class=genderGet Random User/button中的外观下的js代码const app = Vue.createApp...
如何解决在Apache Server中使用vue js SPA刷新页面时“找不到”的问题？
我刚刚将我的vue js项目部署到apache服务器。我的文件/dist位于/var/www/html/dist中。当我访问该页面时，它工作得很好。但当我访问另一个页面并刷新该页面时，在浏览器中显示404未找到。我该如何解决这个问题呢？
如何在Vuejs中找到包含多个区段的页面中的路由和区段id
我的导航栏中有以下链接li class=nav-item router-link to=/branding class=nav-linkBranding/router-link /li复制它目前运行良好，并前往品牌页面，其中有...
我无法在Vue js中添加带有惯性js的vue页面过渡
过渡在惯性页面中不起作用。如果在转换标签之间添加appLayout。它起作用了。但是所有的内容都提供了过渡。Dashboard.vuetemplate admin-layout h1Admin Dashboard/h1 /admin...
从VueJS应用程序分离的Nginx服务登录页面
我正在尝试分别为我的登录页面和Vuejs应用程序提供服务。下面是为我的VueJS应用程序提供服务的Nginx配置，它运行良好。如何配置它来为我的/“登录页面和/app”的VueJS应用程序提供服务？server { listen $PO...

保定市礼蒴二手车销售有限公司

Vuejs 页面的区域化与组件封装的实现

随机推荐

相关专题