总结Vue第二天：自定义子组件、父子组件通信、插槽
总结Vue第二天：自定义子组件、父子组件通信、插槽
一、组件：
组件目录
1、注册组件（全局组件、局部组件和小demo）
2、组件数据存放
3、父子组件通信（父级向子级传递数据、子级向父级传递数据）
4、父子组件存储数据的访问：
5、 插槽slot
1、注册组件（全局组件、局部组件和demo、template模块）：
（1）注册组件的基本步骤：
① 创建组件构造器对象 Vue.extend( ); 方法【可以省略】
② 注册组件 Vue.component({组件的标签名：组件构造器对象} );
③ 使用组件，在Vue实例的作用域范围内使用
（2）全局组件demo：
<div id="app">
<runoob></runoob>
</div> <script>
// 注册
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
（3）局部组件demo：
<div id="app">
<runoob></runoob>
</div> <script>
var Child = {
template: '<h1>自定义组件!</h1>'
} // 创建根实例
new Vue({
el: '#app',
components: {
// <runoob> 将只在父模板可用
'runoob': Child
}
})
</script>
（4）template模块的简化（模板的分离写法）：即将其内容封装到 template 标签里。
<!-- 使用组件 -->
<my-cpn></my-cpn>
<!-- 模板 -->
<template id="cpn">
<div>
<h1>nihao</h1>
</div>
</template> let app = new Vue({
el: '#app',
components: {
'my-cpn': {template: `#cpn`}
}
});
2、组件数据存放：
（1）组件对象也有一个data属性
（2）☆这个data属性必须是一个函数，且函数返回一个对象，对象内部保存着数据
3、父子组件通信（父级向子级传递数据、子级向父级传递数据）
（1）父级向子级传递数据【Prop】：
● Prop：子组件在自身标签上，使用自定义的属性来接收外界（也可以是父组件）的数据，然后将数据接收到prop中。【接收父组件的数据—动态Prop，需要v-bind绑定属性，数据可以从vue实例中获取】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html暂时不支持驼峰写法</title>
</head>
<body>
<div id="app">
<!--
子组件要或者外界（例如也可以是父组件）的数据，它是需要在自身标签上，使用props中自定义的属性来接收，
若是想接收的数据来自父组件【Vue实例】------通过绑定属性（数据可以从vue实例中获取）
-->
<!--静态的prop-->
<cpn c-info="info"></cpn><br/>
<!--动态prop-->
<cpn :c-info="info"></cpn>
</div> <template id="cpn">
<div>
<h1>cpn的内容</h1>
<ul>
<li v-for="item in cInfo">{{item}}</li>
</ul>
</div>
</template>
</body> <script type="text/javascript" src="./js/vue.min.js"></script> <script>
const cpn = {
template: `#cpn`,
props:{
cInfo: {
type: Object,
default(){
return {}
}
}
},
} let app = new Vue({
el: '#app',
data: {
message:'动态绑定属性v-bind',
abc: {
id: '1',
name: '父类的info中的name',
age: '1'
},
info: {
id: '1',
name: '父类的info中的name',
age: '15'
}
},
components: {
cpn
}
});
</script>
</body>
</html>
ps：Prop 验证（组件可以为 props 指定验证要求）：
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
（2）子级向父级传递数据【emit】：
● 子组件通过$emit(‘自定义事件名’, 数据变量)向父组件发送消息，在子组件进行自定义的事件进行监听【监听调用的函数可以直接通过一个自定义的参数接收到数据变量】
<!-- 父组件 -->
<div id="app">
<!-- 子组件上监听到自定义的事件的同时，也监听到发送的数据num，事件指向的函数，通过自定义一个参数value可以直接拿到数据num -->
<cpn :c-info="info" @item-click="itemClick"></cpn>
</div>
<!-- 子组件的模板 -->
<template id="cpn">
<div>
<h1>子组件的模板</h1>
<button v-for="item in cInfo" @click="btnClick(item)">{{item}}</button>
</div>
</template>
</body> <script type="text/javascript" src="js/vue.min.js"></script> <script>
const cpn = {
template: `#cpn`,
data(){
return{
num: 99
}
},
props:{
cInfo: {
type: Object,
default(){
return {}
}
}
},
methods: {
btnClick(item){
console.log('子组件接收到父组件传递的数据' + item);
//$emit的第一个参数是自定义的事件名称和发送数据num
this.$emit('item-click', this.num);
}
}
} let app = new Vue({
el: '#app',
data: {
info: {
id: '1',
name: 'yile',
age: '15'
}
},
methods: {
itemClick(value){
console.log('父组件监听到子组件发出的事件和接收到子组件的数据' + value);
}
},
components: {
cpn
}
});
</script>
4、Vue父子组件存储数据的访问：
（1）父组件访问子组件data中存储的数据：使用$children或 $refs
（注意：this.$children得到的是一个数组，包含所有子组件对象。）
（2）$refs的使用：
■ $refs和ref指令通常是一起使用的
■ 首先，我们通过ref给某一个子组件绑定一个特定的ID
■ 其次，通过this.$refs.ID就可以访问到该组件了
（3）子组件访问父组件：使用$parent
二、插槽slot
1、编译作用域：
父组件模板的所有东西（例如变量）都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
2、slot基本使用：
3、具名插槽slot：
总结Vue第二天：自定义子组件、父子组件通信、插槽的更多相关文章
- vue组件父子间通信之综合练习--假的聊天室
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue组件-构成组件-父子组件相互传递数据
组件对于vue来说非常重要,学习学习了基础vue后,再回过头来把组件弄透! 一.概念 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B . 它们之间必然需要相互通信 ...
- Vue（二十六）父子组件通信
今天写了一个分页公共组件,就出现了父子组件通信的问题,今天来总结下我遇到的父子组件通信问题 一.子组件调取父组件的数据或方法 (1)props 想要把父组件的值,传到子组件中,使用props 比如你在 ...
- vue组件父子组件传递引用类型数据
今天在写分页功能时,发现父子组件传值时,子组件监听不到父组件中数据的变化,传递的是一个引用类型的数据 其原因是引用类型共用一个内存地址,父子组件用的是同一个对象,故子组件监听不到变化,此时就需要做一个 ...
- Vuejs——（10）组件——父子组件通信
版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...
- vue全局组件-父子组件传值
全局组件注册方式:Vue.component(组件名,{方法}) demo: 子组件:upload.vue <template> <div > <div class=&q ...
- vue组件父子组件之间传递数据
举个栗子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue组件父子间通信02
三.组件间通信($parent $refs) 父组件要想获取子组件的数据:①在调用子组件的时候,指定ref属性<child-component ref="mySon"> ...
- Vue组件父子间通信01
子组件传递数据 用户已经登录 父组件接收数据 并显示列表,未登录不显示列表 /* 有两个组件,分别是main-component,header-component.main-component是由he ...
- Vue使用Promise自定义confirm确认框组件
使用Promise模拟浏览器确认框,可自定义标题,内容,按钮文字和类型 参数名 类型 说明 title String 标题 content String 内容 yesBtnText String 确认 ...
随机推荐
- O(1)判断两点之间是否有边
O(1)判断两点之间是否有边 问题描述 给定一张 \(n\) 个点,\(m\) 条边的有向图. 多次询问,要求每次 \(\mathcal{O}(1)\) 判断两点之间是否有边(你可以忽略输入.输出等问 ...
- Kubernetes：Pod 升级、回滚
本篇主要讨论如何实现滚动更新和回滚,任意更换版本并且回滚以前的版本(版本更新),而下一章会讨论到 Pod 缩放,根据机器资源自动拓展和收缩应用(自动扩容实例). 本文为作者的 Kubernetes 系 ...
- 【shell】真正解决syntax error:unexpected end of file？
今天写了个较长的shell脚本,结构嵌套比较多,最后运行时,出现了syntax error: unexpected end of file的错误. 这个之前碰到过,经常在win系统转移脚本文件到uni ...
- 大规模 K8s 集群管理经验分享 · 上篇
11 月 23 日,Erda 与 OSCHINA 社区联手发起了[高手问答第 271 期 -- 聊聊大规模 K8s 集群管理],目前问答活动已持续一周,由 Erda SRE 团队负责人骆冰利为大家解答 ...
- 关于java中的安全管理器
最近再查看java的源码的时候看见了这一类代码 final SecurityManager sm = System.getSecurityManager(); 想要了解这个是为了做什么,查看资料之后发 ...
- Elasticsearch【基础入门】
目录 一.操作index 1.查看index 2.增加index 3.删除index 二.操作index 1.新增document 2.查询type 全部数据 3.查找指定 id 的 document ...
- 大数据学习day15----第三阶段----scala03--------1.函数（“_”的使用, 函数和方法的区别）2. 数组和集合常用的方法（迭代器，并行集合） 3. 深度理解函数 4 练习（用java实现类似Scala函数式编程的功能（不能使用Lambda表达式））
1. 函数 函数就是一个非常灵活的运算逻辑,可以灵活的将函数传入方法中,前提是方法中接收的是类型一致的函数类型 函数式编程的好处:想要做什么就调用相应的方法(fliter.map.groupBy.so ...
- STL全特化与偏特化
在泛型编程中,常常会使用一些非完全泛型的类模板,这就是特化. 如何理解全特化呢?如上图所示,第一个template class是空间配置器的类模板,第二个就是一个全特化的template class. ...
- JAVA序列化浅析
java.io.Serializable浅析 Java API中java.io.Serializable接口源码: 1 public interface Serializable { 2 } 类通过实 ...
- spring boot项目创建与使用
概述 spring boot通常使用maven创建,重点在于pom.xml配置,有了pom.xml配置,可以先创建一个空的maven项目,然后从maven下载相关jar包. spring boot d ...