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 ...
随机推荐
- ES-6常用语法和Vue初识
一.ES6常用语法 1.变量的定义 1. 介绍 ES6以前 var关键字用来声明变量,无论声明在何处都存在变量提升这个事情,会提前创建变量. 作用域也只有全局作用域以及函数作用域,所以变量会提升在函数 ...
- 【JVM】关于类加载器准备阶段的一道面试题目
一个经典的延伸问题 我们来看一个经典的延伸问题,准备阶段谈到静态变量,那么对于常量和不同静态变量有什么区别? 需要明确的是,没有人能够精确的理解和记忆所有信息,如果碰到这种问题,有直接答案当然最好:没 ...
- radio,check美化
单选框与复选框原生控件美化有多种解决方案,现在采用经典的input+label的方式自己实现一种 思路: input 和label 通过id和for属性关联,点击label时,input选中状态改变 ...
- [curl]convert curl to python Ruby
https://curl.trillworks.com/
- request param 获取
通过request对象获取客户端请求信息 getRequestURL方法返回客户端发出请求时的完整URL. getRequestURI方法返回请求行中的资源名部分. getQueryString 方法 ...
- vue实战记录（四）- vue实现购物车功能之过滤器的使用
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(四) GitHub:sue ...
- 大数质因解：浅谈Miller-Rabin和Pollard-Rho算法
2017-07-19 08:54 Amphetamine:能发一下代码吗? 应我那位谜一样好友的邀约,我打算好好看一看Miller-Rabin和Pollard-Rho算法.很奇怪,各种地方有很多代码描 ...
- 【Linux网络编程】TCP网络编程中connect()、listen()和accept()三者之间的关系
[Linux网络编程]TCP网络编程中connect().listen()和accept()三者之间的关系 基于 TCP 的网络编程开发分为服务器端和客户端两部分,常见的核心步骤和流程如下: conn ...
- 深入剖析Kubernetes学习笔记：预习篇（01-04）
01 初出茅庐 1.PaaS 项目被大家接纳的一个主要原因? 就是它提供了一种名叫"应用托管". 2.像 Cloud Foundry 这样的 PaaS 项目,最核心的组件是? 一套 ...
- java BIO/NIO/AIO 学习
一.了解Unix网络编程5种I/O模型 1.1.阻塞式I/O模型 阻塞I/O(blocking I/O)模型,进程调用recvfrom,其系统调用直到数据报到达且被拷贝到应用进程的缓冲区中或者发生错误 ...