vue-04-组件
1, 介绍
vue最强大的功能, 可以扩展html元素, 封装可充用的代码
在较高的层面, 组件是自定义元素, vue的编译器为他添加特殊功能, 在有些情况下, 组件也可以表现为用 ls 特性进行扩展了html元素
所有的vue组件同时也都是vue的实例, 所以可接受相同的选项对象(除了一些根级特有的选项) 并提供相同的生命周期的钩子
2, 单文件组件
1), template
2), script
3), style
3部分组成
3, 子父级组件
1), 使用
<template>
<div>
<p > 这儿是 子组件 </p>
</div>
</template> <script>
export default {
name: "b02_son"
}
</script> <style scoped> </style>
父组件中接受
<script>
// 导入子组件
import b02_son from './b02_son' // 必须导出, 外部才可以访问
export default {
name: "b01_component",
components: {
b02_son
}
}
</script>
然后引用
<div>
<!--导入子组件-->
<b02_son/>
</div>
2, 子父组件通讯
父 -> 子 传递数据
子 -> 父 相应事件
1), 父到子
使用props 进行传递
使用 v-bind进行传递, 可简写为 : 的形式
父类中
<b02_son :title="msg" :lifemsg="lifemsg" :num="num" :obj="obj"/>
data() {
return {
msg: "传递给子的数据",
lifemsg: "hello",
num: 10,
obj: {
name: 'vini',
age: 18
}
}
},
可传递动态数据, 通过v-mode绑定
<!--导入子组件-->
<input type="text" v-model.lazy="lifemsg"> <b02_son :title="msg" :lifemsg="lifemsg" :num="num" :obj="obj"/>
<button @click="changeMsg">button ..</button>
子类中接受
使用props 进行接受
1), 可限定类型, 可同时限制多个类型
2), 可设置默认值
3), 可设置必须
4), 返回为对象形式的话, 必须用function-return的形式
props: {
// 增加必须项
title: {
type: String,
required: true,
}, // 支持多种类型
lifemsg: [String, Number], // 带有默认值
num: {
type: Number,
default: ,
}, // obj 接收
obj: {
type: Object,
default: function () {
return {
name: 'lisa',
age:
}
}
} }
2), 子到父数据传递
需要 @click 并且以函数的形式传递
子中进行绑定和传递, 使用emit传递给父
<template>
<div>
<div>
子给父传递数据
</div> <div>
<button @click="sendMsg">传递数据</button>
</div> </div>
</template> <script>
export default {
name: "b03_emit",
data() {
return {
msg: "子组件数据",
}
},
// 绑定emit
methods: {
sendMsg(event) {
// key, value
this.$emit("sendMsg", this.msg)
}
}
}
</script> <style scoped> </style>
父中进行接受, 也以 函数 的形式进行接受
<!--子给父传递数据-->
<div>
<b03_emit @sendMsg="getMsg"/> </div>
methods: {
getMsg(data) {
this.msg = data;
}
}
2), 父中的数据传递给子, 子计算后返回给父
<!--子给父传递数据-->
<div>
<b03_emit @sendAndCompute="sendAndGet" :num="getNum" />
<p> {{ result }}</p>
</div>
script:
data() {
return {
result: ,
}
},
computed: {
getNum() {
return this.result - ;
}
},
methods: {
sendAndGet(data) {
console.log("..." + data)
this.result = data;
}
}
子中:
<div>
<!--<button @click="sendMsg">传递数据</button>-->
<button @click="sendAndCompute"> 计算数据 </button>
</div>
// 绑定emit, 返回给父
methods: {
sendAndCompute(event) {
this.$emit("sendAndCompute", this.computeNum)
}
},
// 接受来自父的数据
props: {
num: {
type: Number,
required: true,
}
},
// 计算
computed: {
computeNum() {
return this.num *
}
}
vue-04-组件的更多相关文章
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS
react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
- 如何抽象一个 Vue 公共组件
之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...
- vue的组件和生命周期
Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...
- 为什么VUE注册组件命名时不能用大写的?
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...
随机推荐
- c#mysql批量更新的两种方法
总体而言update 更新上传速度还是慢. 1: 简单的insert 速度稍稍比MySqlDataAdapter慢一点 配合dapper 配置文件 <?xml version="1 ...
- 代码之髓读后感——语法&流程&函数&错误处理
title: 代码之髓读后感2.md date: 2017-07-08 17:33:11 categories: tags: Perl的设计者:Larry Wall在<Programming P ...
- 锻造(forging)
--九校联考24OI__D1T1 题目背景 勇者虽然武力值很高,但在经历了多次战斗后,发现怪物越来越难打,于是开始思考是不是自己平时锻炼没到位,于是苦练一个月后发现--自己连一个史莱姆都打不过了. 勇 ...
- POJ 1741.Tree 树分治 树形dp 树上点对
Tree Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 24258 Accepted: 8062 Description ...
- python04 列表 元祖 字典
1.list 有序,元素可以被修改 li=[1,2,2,"am","123"] 列表中的元素可以是数字,字符串,列表等等 支持切片,切片结果为列表 li[3] ...
- python 根据字符串内数字排序
当我们使用python给一个由字符串组成的列表排序时,常常会排成这样 [‘10a’, ‘11b’, ‘1c’, ‘20d’, ‘21e’, ‘2f’] 这样的形式 ,然而我们想要 [ ‘1c’,‘2f ...
- JNI 记
Java Native Interface(JNI)从零开始详细教程 ================================================================ ...
- 结合OPENSIFT源码详解SIFT算法
平台:win10 x64 +VS 2015专业版 +opencv-2.4.11 + gtk_-bundle_2.24.10_win32 参考博客:https://www.cnblogs.com/cql ...
- java对PDF文档的各种操作
https://www.cnblogs.com/h--d/p/6150320.html(仅以提醒,导航的作用)
- validatord的使用方法理解
今天是周日,自己已经在公司上班一周啦,可是这是我感觉最难熬 一周之一,上一次还是在高考失利的时候,自己整整一个月没有出去,在家里呆着,不知道干什么,这一此自己也是,感觉自己很难在这个公司熬下去,但是, ...