vue组件封装及父子组件传值,事件处理
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组件封装及父子组件传值,事件处理的更多相关文章
- vue项目中的父子组件之间的传值。
首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...
- vue父子组件及非父子组件通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- Vue父子组件及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...
- vue2.0父子组件以及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue2.0父子组件以及非父子组件通信传参详解
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- 简述在Vue脚手架中,组件以及父子组件(非父子组件)之间的传值
1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...
- 微信小程序自定义组件封装及父子间组件传值
首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名 官网地址:https://developers.weixin.qq.com/miniprogra ...
- Vue 关于多个父子组件嵌套传值
prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来.这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解. props: { selectMember: { ...
- 三大前端框架(react、vue、angular2+)父子组件通信总结
公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...
随机推荐
- plupload2.1.2文件合并
1.前端 (1)依赖文件: <link type="text/css" rel="stylesheet" href="~/Content/plu ...
- 1.字符串池化(intern)机制及拓展学习
1.字符串intern机制 用了这么久的python,时刻和字符串打交道,直到遇到下面的情况: a = "hello" b = "hello" print(a ...
- Python人工智能之初识接口
本节需要的两个工具: 1.FFmpeg: 链接:https://pan.baidu.com/s/1jonSAa_TG2XuaJEy3iTmHg 密码:w6hk 2.baidu-aip: pip ins ...
- easyui datagrid 表格中操作栏 按钮图标不显示
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染 解决办法: 使用解析器 Parser(解析器) $.parser.parse(); // 解析所有页面 $.par ...
- (十)JavaScript之【DOM定义】
DOM定义Document Object Model 文档对象模型 是干什么的?改变 HTML 元素的内容 (innerHTML)改变 HTML 元素的样式 (CSS)改变 HTML 元素的属性对 H ...
- C++ Knowledge series Layering
Programming has its own methodology. Layering is everywhere in real life,this why the pruchase and s ...
- unity工具介绍
MemoryProfiler内存分析工具 行为树 behaviac github 场景动画编辑器 Snapdragon Profiler性能分析工具 VTune性能分析器 protobuf数据交换格式 ...
- python3 爬虫笔记(一)beautiful_soup
很多人学习python,爬虫入门,在python爬虫中,有很多库供开发使用. 用于请求的urllib(python3)和request基本库,xpath,beautiful soup,pyquery这 ...
- 【转载】#349 - The Difference Between Virtual and Non-Virtual Methods
In C#, virtual methods support polymorphism, by using a combination of the virtual and override keyw ...
- POJ-2155 Matrix---二维树状数组+区域更新单点查询
题目链接: https://vjudge.net/problem/POJ-2155 题目大意: 给一个n*n的01矩阵,然后有两种操作(m次)C x1 y1 x2 y2是把这个小矩形内所有数字异或一遍 ...