Vue 中组件概念
1 为了能在模板中使用，组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。
1.1 全局注册是通过Vue.component 来向Vue注册，例子
Vue.component('my-component-name', {
// ... options ...
})
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
1.2 局部注册，先声名一个局部组件，在 js 文件中直接用变量接收对象
var comp = {
template:'<li></li>'
}
在根实例中使用 components 属性引入局部组件。
new Vue({
...
components:['comp']
...
})
引入局部组件后就可以在模板中使用子组件了。
2 父组件向子组件传递数据方法，通过 Prop 向子组件传递数据，父组件数据通过绑定子组件的属性向子组件传递数据，在子组件的模板中就可以使用该属性。即成为了子组件的数据属性。
Prop 是你可以在组件上注册的一些自定义属性。当一个值传递给一个 prop 属性的时候，它就变成了那个组件实例的一个属性。例子如下：
2.1 定义一个子组件
Vue.component('list-item',{
template:"<li>{{content}}</li>",
props:['content']
});
props 表明子组件接受父组件通过 content 属性传递过来的数据。
此时子组件的 template 就可以使用 props 中声名的属性了。该属性也是子组件的数据属性。
2.2 在父组件的模板中使用声名的组件。
<ul>
<list-item v-for="(item,index) of listItems" :key="index" :content="item"></list-item>
</ul>
将父组件中的 item 数据绑定到子组件的 content 属性上。
至此就完成了父组件向子组件传递数据的功能。
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo2</title>
<script type="text/javascript" src="../static/vue/vue.js"></script> </head>
<body>
<div id="root">
<input v-model="inputValue">
<button @click="addItem">点我提交</button>
<ul>
<list-item v-for="(item,index) of listItems" :key="index" :content="item"></list-item>
</ul> </div> </body>
<script type="text/javascript"> Vue.component('list-item',{
template:"<li>{{content}}</li>",
props:['content']
}); new Vue({
el:"#root",
data:{
inputValue:'',
listItems:[] },
methods:{
addItem: function () {
this.listItems.push(this.inputValue);
this.inputValue = '';
}
} })
</script>
</html>
3 通过事件向父组件发送消息
3.1 子组件触发父组件的一个事件，我们可以调用内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件。例如：单击按钮，向父组件发送‘enlarge-text’事件。
<button v-on:click="$emit('enlarge-text')">
Enlarge text
</button>
3.1.2 通过函数第二个参数向父组件传递参数
<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值：
<blog-post
...
v-on:enlarge-text="postFontSize += $event"
></blog-post>
解释二：
通过第二小节可以将父组件的数据传递到子组件中。现在想让父组件接受子组件的数据如何做的呢？通过发布订阅模式。主要函数 $emit 抛出一个事件
例子：单击子组件删除对应的子组件。
3.2.1 绑定子组件单击事件，并向父组件抛出事件和数据。
Vue.component('list-item',{
template:"<li @click='handleClick'>{{content}}</li>",
props:['content','index'],
methods:{
handleClick:function () {
this.$emit('delete',this.index);
}
}
});
当单击子组件时，绑定的是handleClick 方法，首先在子组件中使用该方法处理。处理函数通过 $emit 方法抛出 delete 事件（自定义事件） 和 index 数据。
3.2.2 父组件中监听子组件的自定义的 delete 事件，并绑定处理函数。
<list-item
v-for="(item, index) of listItems"
:key="index" :content="item"
:index="index"
@delete="handleDelete"
>
</list-item>
当父组件监听到子组件的 delete 事件后，使用 handleDelete 方法进行处理：删除对应组件。即将 listItems 中的对应数据删除掉，页面上就会对应删除。
new Vue({
el: "#root",
data: {
inputValue:'',
listItems: []
},
methods: {
addItem: function () {
this.listItems.push(this.inputValue);
this.inputValue='';
},
handleDelete: function (index) {
alert(index);
this.listItems.splice(index,);
}
}
})
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo3</title>
<script type="text/javascript" src="../static/vue/vue.js"></script>
</head>
<body>
<div id="root">
<input v-model="inputValue">
<button @click="addItem">添加</button>
<ul>
<!--<li v-for="(item, index) of listItems" :key="index">{{item}}</li>-->
<list-item
v-for="(item, index) of listItems"
:key="index" :content="item"
:index="index"
@delete="handleDelete"
>
</list-item>
</ul> </div> </body> <script type="text/javascript">
Vue.component('list-item',{
template:"<li @click='handleClick'>{{content}}</li>",
props:['content','index'],
methods:{
handleClick:function () {
this.$emit('delete',this.index);
}
}
}); new Vue({
el: "#root",
data: {
inputValue:'',
listItems: []
},
methods: {
addItem: function () {
this.listItems.push(this.inputValue);
this.inputValue='';
},
handleDelete: function (index) {
alert(index);
this.listItems.splice(index,);
}
}
})
</script>
</html>
Vue 中组件概念的更多相关文章
- Vue中组件
0828自我总结 Vue中组件 一.组件的构成 组件:由 template + css + js 三部分组成(.vue文件) 1)组件具有复用性 2) 复用组件时,数据要隔离 3) 复用组件时,方法不 ...
- vue中组件之间的通信
一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式 props vue自定义的事件 消息订阅与发布 vuex sl ...
- Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...
- Vue中组件化编码使用（实战练习一）
Vue中组件化编码的大致流程(初接触).组件之间的参数传递(最基础的形式).组件之间的配合完成一个需求 1.在Vue中进行组件化编码 1.1.组件化编码流程: (1).拆分静态组件:组件要按照功能点拆 ...
- Vue中组件之间的通信方式
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 本文会介绍组件间通信的8种方式如下图所示, 并介绍在不同的场景下如何选择有效方式实现的 ...
- 038——VUE中组件之WEB开发中组件使用场景与定义组件的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中组件化编码使用、实现组件之间的参数传递（实战练习二）
上一章节实现的是静态页面的设计.这一章节实现将数据抽取出来.通过组件间参数的传递来实现 上一章节链接地址:https://blog.csdn.net/weixin_43304253/article/d ...
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
- vue中组件之间的相互调用，及通用后台管理系统左侧菜单树的迭代生成
由于本人近期开始学习使用vue搭建一个后端管理系统的前端项目,在左侧生成菜单树的时候遇到了一些问题.在这里记录下 分析:由于本人设定的菜单可以使多级结构,直接使用vue的v-for 遍历并不是很方便. ...
随机推荐
- POSTGRESQL 自动登录
以前习惯使用MYSQL命令行登录,但是到POSTGRESQL不能实现,下面总结一下方法: 1.填写需要链接的postgresql语句,一般放在~/.bash_profile,例如: alias log ...
- SQL Server中order by的使用，我们来填坑
看似很简单是不是? 单列排序,没有任何问题 select * from tableA where age>1 order by age /*后面可以跟上ASC.DESC,默认是ASC升序排列*/ ...
- 【Excle】一个比VLOOKUP牛的函数LOOKUP
1.根据时间查找最近发生的交易 2.多条件查找 3.反向查找 4.模糊匹配 上述例子充分说明了LOOKUP的查找特技,点击下载上述案例对应的Excle
- python之模块contextlib 加强with语句而存在
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之模块contextlib,为加强with语句而存在 #特别注意:python3和python2 ...
- 如何区分一个android app是h5的还是native
关闭网络连接 请求一个新的界面,如果是原生的 请求失败最起码有一些基本的ui,如果h5就最多有个标题. 在wifi 设置代理,这样h5就不能正常的访问网址了会出现404 ,原生的有基本ui
- openssh基于源码编译覆盖式安装
覆盖式,就是卸载旧的openssh,打扫干净屋子再请客... 注意:请做做好测试工作 00.查看本机已安装的openssh rpm –qa |grep openssh rpm -e openssh-s ...
- 【PHP5.3+】获取getCurrentUrl()中 的地址url
1.在控制器中调用其他 扩展或者类 的方法时候,getCurrentUrl()方法 是获取的[当前控制器下方法]的路由,不是[其他 扩展或者类 方法]的路由!!! 2.getCurrentUrl()方 ...
- TP3.2框架，实现空模块、空控制器、空操作的页面404替换||同步实现apache报错404页面替换
一,前言 一.1)以下代码是在TP3.0版本之后,URL的默认模式=>PATHINFO的前提下进行的.(通俗点,URL中index.php必须存在且正确) 代码和讲解如下: 1.空模块解决:ht ...
- Windows XPSP3通过网络级身份验证方式连接Windows Server 2008远程桌面
远程桌面大大方便了大家的日常管理工作,Windows Server 2008同样秉承这一优秀特性,并引入网络级身份验证(NLA)作为远程桌面连接的默认身份验证方式. 网络级身份验证 (NLA) 是一种 ...
- 解决ubuntu13.04 有线网络 时常掉线的问题
不少朋友在升级或新装ubuntu13.04时遇到有线老掉线的问题:连上不到半分钟又掉了,把网线重新拔插一下又可以接着又掉..基本不能正常使用或工作,很恼人的问题. 网上这方面的资料很少现在我把解决方法 ...