Vue中父子组件通讯——组件todolist
一、todolist功能开发
<div id="root">
<div>
<input type="text" v-model="inputValue">
<button @click="handleSubmit">提交</button>
</div>
<ul>
<li v-for="(item, index ) of list" :key="index">{{item}} </li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
二、todolist组件拆分
定义组件，组件和组件之间通讯
1、全局组件
<div id="root">
<div>
<input type="text" v-model="inputValue">
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item></todo-item>
</ul>
</div>
<script> Vue.component('todo-item',{
template:'<li>item</li>'
})
...
2、局部组件
要注册，否则会报错：
vue.js:597 [Vue warn]: Unknown custom element: <todo-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input type="text" v-model="inputValue">
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
//全局组件
// Vue.component('todo-item',{
// template:'<li>item</li>'
// }) var TodoItem={
template:'<li>item</li>'
}
new Vue({
el:"#root",
components:{
'todo-item':TodoItem
},
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
</body>
</html>
3、组件传值
父组件向子组件传值是通过属性的形式。
<div id="root">
<div>
<input type="text" v-model="inputValue">
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item ,index) of list"
:key="index"
:content="item"
></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props: ['content'], //接收从外部传递进来的content属性
template:'<li>{{content}}</li>'
}) new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
三、组件与实例的关系
new Vue()实例
Vue.component是组件
每一个Vue组件又是一个Vue的实例。
任何一个vue项目都是由千千万万个vue实例组成的。
每个vue实例就是一个组件，每个组件也是vue的实例。
四、实现todolist的删除功能
子组件通过发布订阅模式通知父组件。
<div id="root">
<div>
<input type="text" v-model="inputValue">
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item ,index) of list"
:key="index"
:content="item"
:index="index"
@delete='handleDelete'
></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props: ['content','index'], //接收从外部传递进来的content属性
template:'<li @click="handleDeleteItem">{{content}}</li>',
methods:{
handleDeleteItem:function(){
this.$emit('delete',this.index);
}
}
}) new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
},
handleDelete:function(index){
this.list.splice(index,1);
}
}
})
</script>
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/9061832.html 有问题欢迎与我讨论，共同进步。
Vue中父子组件通讯——组件todolist的更多相关文章
- Vue中父子组件执行的先后顺序
Vera Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...
- Vue中父子组件执行的先后顺序探讨
前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...
- (vue.js)vue中引用了别的组件 ，如何使this指向Vue对象
Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...
- 在WEB项目中调用QQ通讯组件打开QQ聊天界面
在很多WEB项目中,需要提供在线服务的功能,加上自己的联系方式,例如:QQ,不用添加QQ好友也可以交谈,那这到底是怎么实现的呢? 对于这个功能,需要提到一个组件,即“QQ通讯组件”.QQ通讯组件是一种 ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue中父子组件传递信息实现
为了能够在父子组件中实现双向控制,需要以下的步骤: 第一步:子组件中挖坑 (1)在需要父组件填充具体内容的地方挖坑,方式为 <slot name="message">& ...
- vue 中父子组件传值：props和$emit
更新----------- 1 父组件向子组件传值:通过props数组: 在vue-cli Login.vue父组件中有AcceptAndRefuse.vue子组件,首先import进子组件hello ...
- 简述vue中父子组件是怎样相互传递值的（基础向）
前言 首先,你需要知道vue中父组件和子组件分别指的是什么? 父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...
- Vue中的8种组件通信方式
Vue是数据驱动视图更新的框架,所以对于vue来说组件间的数据通信非常重要. 常见使用场景可以分为三类: 父子组件通信: props / $emit $parent / $children provi ...
随机推荐
- Centos7修改时区
设置时区同样, 在 CentOS 7 中, 引入了一个叫 timedatectl 的设置设置程序. 用法很简单: # timedatectl # 查看系统时间方面的各种状态 Local time: 四 ...
- HttpPost方式调用接口的3种方式
第一种:需要httpclient的依赖包 <dependency> <groupId>org.apache.httpcomponents</groupId> < ...
- 了解PID控制
@2019-03-07 [小记] 了解PID控制 比例 - 积分 - 微分 积分 --- 记忆过去 比例 --- 了解现在 微分 --- 预测未来
- deepin安装mysql记录
本文转载自http://www.linuxidc.com/Linux/2016-07/133128.htm sudo apt-get install mysql-server apt-get isnt ...
- uImage
linux内核经过编译后会生成一个ELF格式的可执行程序,叫vmlinux或vmlinuz,是原始的未经任何处理加工的原版内核ELF文件:嵌入式系统烧录的一般不是这个vmlinuz/vmlinux,而 ...
- LFYZ-OJ ID: 1020 过河卒（NOIP2002）
过河卒 Proble Description 如图,A 点有一个过河卒,需要走到目标 B 点.卒行走规则:可以向下.或者向右.同时在棋盘上的任一点有一个对方的马(如上图的C点),该马所在的点和所有跳跃 ...
- [物理学与PDEs]第4章习题2 反应力学方程组形式的化约 - 能量守恒方程
试证明: 利用连续性方程及动量方程, 能量守恒方程 (2. 15) 可化为 (2. 21) 的形式. 证明: 注意到 $$\beex \bea &\quad\cfrac{\p}{\p t}\s ...
- webpack学习笔记——项目引入zepto及tap事件失效的解决
先要npm下来zepto:npm install zepto 然后npm下来exports-loader和script-loader 配置如下: JavaScript // webpack.confi ...
- Centos7 安装 jdk 1.8
Centos7 安装 jdk 1.8 1.下载安装包 链接: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloa ...
- xls添加 序号列技巧
问题背景:在给xls添加一列序列时常碰到一个问题,用下拉很不科学(如果行数很多):用双击需要右边有一列不断开的数据列. 方法一:在A1 =row()回车,选择范围,快捷键 ctrl+d, 复制其文 ...