一、 组件component

1. 什么是组件?
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码
组件是自定义元素(对象)
2. 定义组件的方式
方式1:先创建组件构造器,然后由组件构造器创建组件
方式2:直接创建组件
	<div id="itany">
<hello></hello>
<my-world></my-world>
</div> <script>
/**
* 方式1:先创建组件构造器,然后由组件构造器创建组件
*/
//1.使用Vue.extend()创建一个组件构造器
var MyComponent=Vue.extend({
template:'<h3>Hello World</h3>'
});
//2.使用Vue.component(标签名,组件构造器),根据组件构造器来创建组件
Vue.component('hello',MyComponent); /**
* 方式2:直接创建组件(推荐)
*/
// Vue.component('world',{
Vue.component('my-world',{
template:'<h1>你好,世界</h1>'
}); var vm=new Vue({ //这里的vm也是一个组件,称为根组件Root
el:'#itany',
data:{
msg:'博客园'
}
});
</script>

  

3. 组件的分类
分类:全局组件、局部组件

  

<script>
/**
* 全局组件,可以在所有vue实例中使用
*/
Vue.component('my-hello',{
template:'<h3>{{name}}</h3>',
data:function(){ //在组件中存储数据时,必须以函数形式,函数返回一个对象
return {
name:'alice'
}
}
}); /**
* 局部组件,只能在当前vue实例中使用
*/
var vm=new Vue({
el:'#itany',
data:{
name:'tom'
},
components:{ //局部组件
'my-world':{
template:'<h3>{{age}}</h3>',
data(){
return {
age:25
}
}
}
}
});
</script>

  

      

  

4. 引用模板
将组件内容放到模板<template>中并引用

     

<body>
<div id="itany">
<my-hello></my-hello>
<my-hello></my-hello>
</div> <template id="wbs">
<!-- <template>必须有且只有一个根元素 -->
<div>
<h3>{{msg}}</h3>
<ul>
<li v-for="value in arr">{{value}}</li>
</ul>
</div>
</template> <script>
var vm=new Vue({
el:'#itany',
components:{
'my-hello':{
name:'wbs17022', //指定组件的名称,默认为标签名,可以不设置
template:'#wbs',
data(){
return {
msg:'欢迎来到南京网博',
arr:['tom','jack','mike']
}
}
} }
});
</script>
</body>

  

  

5. 动态组件
<component :is="">组件
多个组件使用同一个挂载点,然后动态的在它们之间切换
<keep-alive>组件
	<div id="itany">

		<button @click="flag='my-hello'">显示hello组件</button>
<button @click="flag='my-world'">显示world组件</button> <div>
<!-- 使用keep-alive组件缓存非活动组件,可以保留状态,避免重新渲染,默认每次都会销毁非活动组件并重新创建 -->
<keep-alive>
<component :is="flag"></component>
</keep-alive>
</div> </div> <script>
var vm=new Vue({
el:'#itany',
data:{
flag:'my-hello'
},
components:{
'my-hello':{
template:'<h3>我是hello组件:{{x}}</h3>',
data(){
return {
x:Math.random()
}
}
},
'my-world':{
template:'<h3>我是world组件:{{y}}</h3>',
data(){
return {
y:Math.random()
}
}
}
}
});
</script>

  

 
二、 组件间数据传递
 
1. 父子组件
在一个组件内部定义另一个组件,称为父子组件
子组件只能在父组件内部使用
默认情况下,子组件无法访问父组件中的数据,每个组件实例的作用域是独立的
2. 组件间数据传递 (通信)
2.1 子组件访问父组件的数据
a)在调用子组件时,绑定想要获取的父组件中的数据
b)在子组件内部,使用props选项声明获取的数据,即接收来自父组件的数据
总结:父组件通过props向下传递数据给子组件
注:组件中的数据共有三种形式:data、props、computed
2.2 父组件访问子组件的数据
a)在子组件中使用vm.$emit(事件名,数据)触发一个自定义事件,事件名自定义
b)父组件在使用子组件的地方监听子组件触发的事件,并在父组件中定义方法,用来获取数据
总结:子组件通过events给父组件发送消息,实际上就是子组件把自己的数据发送到父组件
	<div id="itany">
<my-hello></my-hello>
</div> <template id="hello">
<div>
<h3>我是hello父组件</h3>
<h3>访问自己的数据:{{msg}},{{name}},{{age}},{{user.username}}</h3>
<h3>访问子组件的数据:{{sex}},{{height}}</h3>
<hr> <my-world :message="msg" :name="name" :age="age" @e-world="getData"></my-world>
</div>
</template> <template id="world">
<div>
<h4>我是world子组件</h4>
<h4>访问父组件中的数据:{{message}},{{name}},{{age}},{{user.username}}</h4>
<h4>访问自己的数据:{{sex}},{{height}}</h4>
<button @click="send">将子组件的数据向上传递给父组件</button>
</div>
</template> <script>
var vm=new Vue({ //根组件
el:'#itany',
components:{
'my-hello':{ //父组件
methods:{
getData(sex,height){
this.sex=sex;
this.height=height;
}
},
data(){
return {
msg:'网博',
name:'tom',
age:23,
user:{id:9527,username:'唐伯虎'},
sex:'',
height:''
}
},
template:'#hello',
components:{
'my-world':{ //子组件
data(){
return {
sex:'male',
height:180.5
}
},
template:'#world',
// props:['message','name','age','user'] //简单的字符串数组
props:{ //也可以是对象,允许配置高级设置,如类型判断、数据校验、设置默认值
message:String,
name:{
type:String,
required:true
},
age:{
type:Number,
default:18,
validator:function(value){
return value>=0;
}
},
user:{
type:Object,
default:function(){ //对象或数组的默认值必须使用函数的形式来返回
return {id:3306,username:'秋香'};
}
}
},
methods:{
send(){
// console.log(this); //此处的this表示当前子组件实例
this.$emit('e-world',this.sex,this.height); //使用$emit()触发一个事件,发送数据
}
}
}
}
}
}
});
</script>

  

 

3. 单向数据流
props是单向绑定的,当父组件的属性变化时,将传导给子组件,但是不会反过来
而且不允许子组件直接修改父组件中的数据,报错
 
 
解决方式:
方式1:如果子组件想把它作为局部数据来使用,可以将数据存入另一个变量中再操作,不影响父组件中的数据
方式2:如果子组件想修改数据并且同步更新到父组件,两个方法:
a.使用.sync(1.0版本中支持,2.0版本中不支持,2.3版本又开始支持)
需要显式地触发一个更新事件
b.可以将父组件中的数据包装成对象,然后在子组件中修改对象的属性(因为对象是引用类型,指向同一个内存空间),推荐
	<div id="itany">
<h2>父组件:{{name}}</h2>
<input type="text" v-model="name">
<h2>父组件:{{user.age}}</h2> <hr> <my-hello :name.sync="name" :user="user"></my-hello>
</div> <template id="hello">
<div>
<h3>子组件:{{name}}</h3>
<h3>子组件:{{user.age}}</h3>
<button @click="change">修改数据</button>
</div>
</template> <script>
var vm=new Vue({ //父组件
el:'#itany',
data:{
name:'tom',
user:{
name:'zhangsan',
age:24
}
},
components:{
'my-hello':{ //子组件
template:'#hello',
props:['name','user'],
data(){
return {
username:this.name //方式1:将数据存入另一个变量中再操作
}
},
methods:{
change(){
// this.username='alice'; //方式1
// this.$emit('update:name','alice'); //方式2:a.使用.sync,需要显式地触发一个更新事件
this.user.age=18;
}
}
}
}
});
</script>

  

4. 非父子组件间的通信
非父子组件间的通信,可以通过一个空的Vue实例作为中央事件总线(事件中心),用它来触发事件和监听事件
var Event=new Vue();
Event.$emit(事件名,数据);
Event.$on(事件名,data => {});
	<div id="itany">
<my-a></my-a>
<my-b></my-b>
<my-c></my-c>
</div> <template id="a">
<div>
<h3>A组件:{{name}}</h3>
<button @click="send">将数据发送给C组件</button>
</div>
</template> <template id="b">
<div>
<h3>B组件:{{age}}</h3>
<button @click="send">将数组发送给C组件</button>
</div>
</template> <template id="c">
<div>
<h3>C组件:{{name}},{{age}}</h3>
</div>
</template> <script>
//定义一个空的Vue实例
var Event=new Vue(); var A={
template:'#a',
data(){
return {
name:'tom'
}
},
methods:{
send(){
Event.$emit('data-a',this.name);
}
}
}
var B={
template:'#b',
data(){
return {
age:20
}
},
methods:{
send(){
Event.$emit('data-b',this.age);
}
}
}
var C={
template:'#c',
data(){
return {
name:'',
age:''
}
},
mounted(){ //在模板编译完成后执行
Event.$on('data-a',name => {
this.name=name;
// console.log(this);
}); Event.$on('data-b',age => {
this.age=age;
});
}
} var vm=new Vue({
el:'#itany',
components:{
'my-a':A,
'my-b':B,
'my-c':C
}
});
</script>

  

 
 
三、 slot内容分发
本意:位置、槽
作用:用来获取组件中的原内容,类似angular中的transclude指令
	<div id="itany">
<!-- <my-hello>wbs17022</my-hello> -->
<my-hello>
<ul slot="s1">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<ol slot="s2">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
</my-hello>
</div> <template id="hello">
<div>
<slot name="s2"></slot>
<h3>welcome to itany</h3>
<!-- <slot>如果没有原内容,则显示该内容</slot> -->
<slot name="s1"></slot>
</div>
</template> <script> var vm=new Vue({
el:'#itany',
components:{
'my-hello':{
template:'#hello'
}
}
});
</script>

Vue(十五)组件的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础:JS面向对象&字面量& this字

    缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...

  2. webpack入坑之旅(五)加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  3. Bootstrap入门(十五)组件9:面板组件

    Bootstrap入门(十五)组件9:面板组件 虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以试试面板组件. 1.基本实例 2.带标题的面板 3.情景效果 ...

  4. 微信小程序把玩(二十五)loading组件

    原文:微信小程序把玩(二十五)loading组件 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml <!----> <butt ...

  5. 微信小程序把玩(十五)checkbox组件

    原文:微信小程序把玩(十五)checkbox组件 不得不吐糟下checkbox默认样式真是有点略丑!!!checkbox组件为一个多选框被放到checkbox-group组中,并在checkbox-g ...

  6. vue第十五单元(熟练使用vue-router插件)

    第十五单元(熟练使用vue-router插件) #课程目标 1.掌握路由嵌套 2.掌握导航守卫 #知识点 #一.路由嵌套 很多时候,我们会在一个视口中实现局部页面的切换.这时候就需要到了嵌套路由. 也 ...

  7. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  8. Vue学习之路第二十篇:Vue生命周期函数-组件创建期间的4个钩子函数

    1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...

  9. Bootstrap<基础十五> 输入框组

    Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输 ...

随机推荐

  1. nginx做代理安装docker

    1.环境 服务器IP 服务用途 是否能 联网 192.168.126.128 docker服务器(简称B服务器) 不能 192.168.126.130 nginx服务器(简称A服务器) 能 2.背景 ...

  2. Json常用组件

    Json2.js   开发者:json官网:http://www.json.org/. 适用环境:用于在不支持JSON对象的浏览器(通常是国内使用IE内核的第三方浏览器)下使用.json2.js提供了 ...

  3. ionic2/cordova自定义插件集成aar包

    一.准备自定义插件 1. 准备:安装plugman npm install -g plugman 2. 新建组件 plugman create --name MyPlugin --plugin_id ...

  4. Loadrunner和JMeter并发对比

    今天在项目中测试发现,其实LR才是实际意义上的并发测试,JMeter不算并发 记录用户登录日志: LR脚本: 1.登录操作放在init初始化中,用5个虚拟用户并发测试:

  5. SQLALCHEMY_TRACK_MODIFICATIONS adds significant异常的解决方法

  6. tomcat-会话绑定

    会话保存 1) session  sticky source_ip                         原地址绑定 nginx: ip_hash haproxy: source lvs: ...

  7. ELK 环境搭建4-Kafka + zookeeper

    一.安装前准备 1.节点 192.168.30.41 192.168.30.42 192.168.30.43 2.操作系统: Centos7.5 3.安装包 a.java8: jdk-8u181-li ...

  8. HBase API操作

    |的ascII最大ctrl+shift+t查找类  ctrl+p显示提示 HBase API操作 依赖的jar包 <dependencies> <dependency> < ...

  9. Aladdin and the Flying Carpet(唯一分解定理)

    题目大意:给两个数a,b,求满足c*d==a且c>=b且d>=b的c,d二元组对数,(c,d)和(d,c)属于同一种情况: 题目分析:根据唯一分解定理,先将a唯一分解,则a的所有正约数的个 ...

  10. 动态规划状态压缩-poj1143

    题目链接:http://poj.org/problem?id=1143 题目描述: 代码实现: #include <iostream> #include <string.h> ...