vue开发中,把有统一功能的部分提取出来,作为一个独立的组件,在需要使用的时候引入,可以有效减少代码冗余.
难点在于如果封装,使用,如何传参,派发事件等,我会采取倒叙的方式进行说明.
(本文总结于Vue2实战解密一书)
代码如下:
封装组件BookList.vue


<template>
<div class="book-list">
<div class="header">
<div class="heading">{{heading}}</div>
<div class="more">更多...</div>
</div>
<div class="book-items">
<div class="book" v-for="book in books">
<div class="cover">
<img :src="book.imgUrl" />
</div>
<div>{{book.title}}</div>
<div>{{book.authors | join}}</div>
</div>
</div>
</div>
</template>
<script>
export default{
props:['heading','books'],
filters:{
join(args){
return args.join(',');
}
}
}
</script>

要向组件输入数据就不能用data来作为数据容器了,因为data是一个内部对象,此时要换成props
我们可以这样理解:
data的作用域是仅仅适用于内部,而对于外部是不可见的,props是内部外部都可见,是一个公共的组件成员变量.

Home.vue 组件代码如下:


<template>
<div class="section">
<book-list :books="books1" heading="书列表1"></book-list>
</div>
<div class="section">
<book-list :books="books2" heading="书列表2"></book-list>
</div>
</template>
<script>
import BookList from './components/BookList.vue'
export default{
data(){
return{
books1:[],
books2:[],
}
},
components:{ //注册自定义组件
BookList
}
</script>

来源:https://segmentfault.com/a/1190000017859667

vue组件封装及父子组件传值,事件处理的更多相关文章

  1. vue项目中的父子组件之间的传值。

    首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...

  2. vue父子组件及非父子组件通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  3. Vue父子组件及非父子组件如何通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...

  4. vue2.0父子组件以及非父子组件如何通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  5. vue2.0父子组件以及非父子组件通信传参详解

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  6. 简述在Vue脚手架中,组件以及父子组件(非父子组件)之间的传值

    1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...

  7. 微信小程序自定义组件封装及父子间组件传值

    首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名 官网地址:https://developers.weixin.qq.com/miniprogra ...

  8. Vue 关于多个父子组件嵌套传值

    prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来.这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解. props: { selectMember: { ...

  9. 三大前端框架(react、vue、angular2+)父子组件通信总结

    公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...

随机推荐

  1. HDU 4009——Transfer water——————【最小树形图、不定根】

    Transfer water Time Limit:3000MS     Memory Limit:65768KB     64bit IO Format:%I64d & %I64u Subm ...

  2. c#获取目录

    获取程序目录 string s = System.IO.Directory.GetCurrentDirectory(); Console.WriteLine(s);// C:\Users\r-\doc ...

  3. Redis入门--(二)Redis的概述

    1.Redis的由来 创始人觉得Mysql不好用,就自己写了: 国内使用Redis的网站有新浪微博,知乎: 国外GitHub: VMWare也支持redis的开发 2.Redis的概述 官方提供的测试 ...

  4. 基于vue2+nuxt构建的高仿饿了么(2018版)

    前言 高仿饿了么,以nuxt作为vue的服务端渲染,适合刚接触或者准备上vue ssr的同学参考和学习 项目地址如遇网络不佳,请移步国内镜像加速节点 效果演示 查看demo请戳这里(请用chrome手 ...

  5. 从零开始的全栈工程师——js篇(正则表达式)

    正则 就是一条规则 用来检验字符串的格式 目标就是字符串 只要是通过表单提交的数据 都是字符串1.正则定义var reg = new RegExp( )var reg = /格式/ <--简写 ...

  6. 102001 E

    x轴上方给你n个点,m个水平杆子, 然后q组询问,每次询问一个点,问能看到多少个点. n,q<=40000,m<=5 自闭了呀,又写了个 for(int i=1;i<(1<&l ...

  7. InvocationTargetException异常

    package com.smbea.demo.reflect; /** * 越界异常 * @author hapday * @date 2017年1月20日 @time下午7:59:01 */ pub ...

  8. viewport信息设置

  9. (一)JavaScript之[数据类型]与[对象]

    1].数据类型字符串(String).数字(Number).布尔(Boolean).数组(Array).对象(Object).空(Null).未定义 (Undefined). //极大或极小的数字可以 ...

  10. (六)JavaScript之[Regular Expression]与[错误(try, catch, throw)]

    10].正则表达式 /** * 正则表达式(Regular Expression): * * 用于文本搜索和文本替换 * */ /** * /good/i是一个正则表达式. * good是一个模式(用 ...