二、vue中组件的使用
1.组件拆分
1.组件实质上也是一个vue实例,因此组件中也可以使用vue的对象属性,反过来每一个vue实例也是一个vue组件(注:1.唯一不同的是el是根实例的特有选项,2.组件中的data必须是一个函数);
2.如果vue实例中没有template模板的定义,那么vue会把el挂载点下的html作为vue实例的模板;
3.模板中如果还有子组件,父组件调用子组件的时候,通过属性的方式进行调用,那么子组件可以使用props接受从父作用域将数据传到子组件,在子组件的模板上进行显示。
对上一个例子中的todolist,进行组件的拆分
Vue.component( id, [definition] )
props
父组件向子组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件拆分</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="inputValue">
<button @click="putList">提交</button>
</div>
<ul>
<todo-item
v-for="(ls,index) in list"
:key="index"
:content="ls"
>
<!--在标签中定义了content属性来传递参数给模板组件,在组件中通过props定义['content']来接受属性-->
</todo-item>
</ul> </div>
<script> //1.定义全局组件
/*
* Vue.component( id, [definition] )
* */
Vue.component('todo-item', {
props:['content'],//props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值。
template: '<li>{{content}}</li>'
}); //2.局部组件,在vue实例中声明components来注册指定局部组件
// var TodoItem = {
// template: '<li>item</li>'
// }; new Vue({
el: "#app",
// components:{
// 'todo-item': TodoItem
// },
data: {//数据项
inputValue: "",
list: []
},
methods: {
putList: function () {
this.list.push(this.inputValue);
this.inputValue = "";
}
}
});
</script>
</body>
</html>
2.子组件向父组件传值(发布订阅模式)
vm.$emit( eventName, […args] )
子组件向父组件进行传值,是通过发布订阅模式进行传值
还是以todolist为列:
实现点击列表中的某一个数据,删除该数据的功能:
1.在父组件调用的子组件标签中绑定:index="index",通过index,来删除遍历的数据
2.子组件中通过props: ['content', 'index'],接受数据index
3.在子组件的模板上添加clickItem事件,并在methods中定义该事件,使用$emit来向外发布该事件
4.在父组件调用的子组件标签中可以通过$emit发布过来的delete事件,和传递的index参数,指定一个fuDel删除方法,并在父组件中定义方法fuDel,来删除。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件拆分</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="inputValue">
<button @click="putList">提交</button>
</div>
<ul>
<!--在标签中定义了content属性来传递参数给模板组件,在组件中通过props定义['content']来接受属性-->
<todo-item
v-for="(ls,index) in list"
:key="index"
:content="ls"
:index="index"
@delete="fuDel" >
<!--@delete为父组件调用子组件,对子组件的监听$emit发布进行订阅,来执行父组件fuDel的删除方法-->
</todo-item>
</ul> </div>
<script> //1.定义全局组件
/*
* Vue.component( id, [definition] )
* */
Vue.component('todo-item', {
props: ['content', 'index'],//props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值。
template: '<li @click="clickItem">{{content}}</li>',
methods: {
clickItem: function () {
this.$emit('delete', this.index);//$emit触发当前实例上的事件,向外发布该事件
}
}
}); //2.局部组件,在vue实例中声明components来注册指定局部组件
// var TodoItem = {
// template: '<li>item</li>'
// }; new Vue({
el: "#app",
// components:{
// 'todo-item': TodoItem
// },
data: {//数据项
inputValue: "",
list: []
},
methods: {
putList: function () {
this.list.push(this.inputValue);
this.inputValue = "";
},
fuDel: function (index) {
this.list.splice(index, 1);
}
}
});
</script>
</body>
</html>
二、vue中组件的使用的更多相关文章
- Vue学习(二)-Vue中组件间传值常用的几种方式
版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...
- 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中组件化编码使用、实现组件之间的参数传递(实战练习二)
上一章节实现的是静态页面的设计.这一章节实现将数据抽取出来.通过组件间参数的传递来实现 上一章节链接地址:https://blog.csdn.net/weixin_43304253/article/d ...
- Vue中组件间传值常用的几种方式
版本说明: vue-cli:3.0 一.父子组件间传值 1.props/$emit -父组件==>>子组件: 子组件中通过定义props接收父组件中通过v-bind绑定的数据 父组件代码 ...
- Vue中组件之间的通信方式
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 本文会介绍组件间通信的8种方式如下图所示, 并介绍在不同的场景下如何选择有效方式实现的 ...
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
- 038——VUE中组件之WEB开发中组件使用场景与定义组件的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 嵌入AppBar并且带搜索建议的搜索框(Android)
先看结果: 相关的官方文档在这里:Creating a Search Interface Android官方提供了两种方式: 弹出一个Dialog,覆盖当前的Activity界面 在AppBar中扩展 ...
- jar 命令详解
jar 是随 JDK 安装的,在 JDK 安装目录下的 bin 目录中,Windows 下文件名为 jar.exe,Linux 下文件名为 jar.它的运行需要用到 JDK 安装目录下 lib 目录中 ...
- Sed 静默替换文件内容 以及 awk 的简单使用
1. Sed的help 鸟哥说的 学东西 先看 help 先看man 再google 不好FQ再百度.. Usage: sed [OPTION]... {script-only-if-no-other ...
- OneZero第五次站立会议(2016.3.25)
会议时间:2016年3月25日 12:45~12:57 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论,确定会后修改内容. 会议内容:1.界面原型已经确定.(夏负责) 2 ...
- JSON中JObject和JArray的修改
一.JObject 和JArray的添加.修改.移除 1.先添加一个json字符串,把json字符串加载到JObject中,然后转换成JObject.根据索引修改对象的属性值,移除属性,添加属性 us ...
- BZOJ4036 HAOI2015按位或(概率期望+容斥原理)
考虑min-max容斥,改为求位集合内第一次有位变成1的期望时间.求出一次操作选择了S中的任意1的概率P[S],期望时间即为1/P[S]. 考虑怎么求P[S].P[S]=∑p[s] (s&S& ...
- Ubuntu 16.04搭建LAMP开发环境
基本设置 1.配置网络环境 管理员给分配了一个静态IP,所以还需要进一步配置网络环境 配置DNS:右上角网络连接->编辑链接->有线连接1->IPv4设置->DNS服务器:20 ...
- MySQL的IFNULL解决判空问题
问题:mybatis返回的null类型数据消失,导致前端展示出错 思路:如果查询出的结果是空值,应当转换成空字符串.当然在前端也能进行判断,但要求后台实现这个功能. 解决方案: 使用如下方法查询: S ...
- MT【187】余弦的线性组合
已知$\alpha+\beta+\gamma=\pi,(\alpha,\beta,\gamma\ge0)$ 求:$3\cos\alpha+4\cos\beta+5\cos\gamma$的最大值____ ...
- 【刷题】BZOJ 3252 攻略
Description 题目简述:树版[k取方格数] 众所周知,桂木桂马是攻略之神,开启攻略之神模式后,他可以同时攻略k部游戏.今天他得到了一款新游戏<XX 半岛>,这款游戏有n个场景(s ...