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中组件的使用的更多相关文章

  1. Vue学习(二)-Vue中组件间传值常用的几种方式

    版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...

  2. Vue中组件

    0828自我总结 Vue中组件 一.组件的构成 组件:由 template + css + js 三部分组成(.vue文件) 1)组件具有复用性 2) 复用组件时,数据要隔离 3) 复用组件时,方法不 ...

  3. vue中组件之间的通信

    一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式  props vue自定义的事件 消息订阅与发布 vuex sl ...

  4. Vue中组件间通信的方式

    Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...

  5. Vue中组件化编码使用(实战练习一)

    Vue中组件化编码的大致流程(初接触).组件之间的参数传递(最基础的形式).组件之间的配合完成一个需求 1.在Vue中进行组件化编码 1.1.组件化编码流程: (1).拆分静态组件:组件要按照功能点拆 ...

  6. Vue中组件化编码使用、实现组件之间的参数传递(实战练习二)

    上一章节实现的是静态页面的设计.这一章节实现将数据抽取出来.通过组件间参数的传递来实现 上一章节链接地址:https://blog.csdn.net/weixin_43304253/article/d ...

  7. Vue中组件间传值常用的几种方式

    版本说明: vue-cli:3.0 一.父子组件间传值 1.props/$emit -父组件==>>子组件: 子组件中通过定义props接收父组件中通过v-bind绑定的数据 父组件代码 ...

  8. Vue中组件之间的通信方式

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 本文会介绍组件间通信的8种方式如下图所示, 并介绍在不同的场景下如何选择有效方式实现的 ...

  9. vue中组件的四种方法总结

    希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...

  10. 038——VUE中组件之WEB开发中组件使用场景与定义组件的方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 嵌入AppBar并且带搜索建议的搜索框(Android)

    先看结果: 相关的官方文档在这里:Creating a Search Interface Android官方提供了两种方式: 弹出一个Dialog,覆盖当前的Activity界面 在AppBar中扩展 ...

  2. jar 命令详解

    jar 是随 JDK 安装的,在 JDK 安装目录下的 bin 目录中,Windows 下文件名为 jar.exe,Linux 下文件名为 jar.它的运行需要用到 JDK 安装目录下 lib 目录中 ...

  3. Sed 静默替换文件内容 以及 awk 的简单使用

    1. Sed的help 鸟哥说的 学东西 先看 help 先看man 再google 不好FQ再百度.. Usage: sed [OPTION]... {script-only-if-no-other ...

  4. OneZero第五次站立会议(2016.3.25)

    会议时间:2016年3月25日 12:45~12:57 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论,确定会后修改内容. 会议内容:1.界面原型已经确定.(夏负责) 2 ...

  5. JSON中JObject和JArray的修改

    一.JObject 和JArray的添加.修改.移除 1.先添加一个json字符串,把json字符串加载到JObject中,然后转换成JObject.根据索引修改对象的属性值,移除属性,添加属性 us ...

  6. BZOJ4036 HAOI2015按位或(概率期望+容斥原理)

    考虑min-max容斥,改为求位集合内第一次有位变成1的期望时间.求出一次操作选择了S中的任意1的概率P[S],期望时间即为1/P[S]. 考虑怎么求P[S].P[S]=∑p[s] (s&S& ...

  7. Ubuntu 16.04搭建LAMP开发环境

    基本设置 1.配置网络环境 管理员给分配了一个静态IP,所以还需要进一步配置网络环境 配置DNS:右上角网络连接->编辑链接->有线连接1->IPv4设置->DNS服务器:20 ...

  8. MySQL的IFNULL解决判空问题

    问题:mybatis返回的null类型数据消失,导致前端展示出错 思路:如果查询出的结果是空值,应当转换成空字符串.当然在前端也能进行判断,但要求后台实现这个功能. 解决方案: 使用如下方法查询: S ...

  9. MT【187】余弦的线性组合

    已知$\alpha+\beta+\gamma=\pi,(\alpha,\beta,\gamma\ge0)$ 求:$3\cos\alpha+4\cos\beta+5\cos\gamma$的最大值____ ...

  10. 【刷题】BZOJ 3252 攻略

    Description 题目简述:树版[k取方格数] 众所周知,桂木桂马是攻略之神,开启攻略之神模式后,他可以同时攻略k部游戏.今天他得到了一款新游戏<XX 半岛>,这款游戏有n个场景(s ...