Vue中父子组件通讯——组件todolist

时间:2022-09-16 14:13:09

一、todolist功能开发

Vue中父子组件通讯——组件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的更多相关文章

  1. Vue中父子组件执行的先后顺序

    Vera   Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...

  2. Vue中父子组件执行的先后顺序探讨

    前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...

  3. &lpar;vue&period;js&rpar;vue中引用了别的组件 ,如何使this指向Vue对象

    Vue中引用了别的组件 ,如何使this指向Vue对象 今天学习Vue组件传值, 通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的 ...

  4. 在WEB项目中调用QQ通讯组件打开QQ聊天界面

    在很多WEB项目中,需要提供在线服务的功能,加上自己的联系方式,例如:QQ,不用添加QQ好友也可以交谈,那这到底是怎么实现的呢? 对于这个功能,需要提到一个组件,即“QQ通讯组件”.QQ通讯组件是一种 ...

  5. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  6. vue中父子组件传递信息实现

    为了能够在父子组件中实现双向控制,需要以下的步骤: 第一步:子组件中挖坑 (1)在需要父组件填充具体内容的地方挖坑,方式为 <slot name="message">& ...

  7. vue 中父子组件传值:props和&dollar;emit

    更新----------- 1 父组件向子组件传值:通过props数组: 在vue-cli Login.vue父组件中有AcceptAndRefuse.vue子组件,首先import进子组件hello ...

  8. 简述vue中父子组件是怎样相互传递值的(基础向)

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么?   父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...

  9. Vue中的8种组件通信方式

    Vue是数据驱动视图更新的框架,所以对于vue来说组件间的数据通信非常重要. 常见使用场景可以分为三类: 父子组件通信: props / $emit $parent / $children provi ...

随机推荐

  1. phpcms v9 黄页实现手机访问手机版,电脑访问电脑版(双模板)

    第一步.模板文件夹下,yp复制一份,改名字 ypwap 第二步.修改phpcms/modules/yp/index.php和phpcms/modules/ypwap/index.php //判断客户端 ...

  2. Set a static file on django

    1. In setting file: ROOT_PATH='/home/ronglian/project/taskschedule' STATIC_URL = '/static/' STATICFI ...

  3. Spring Boot 环境变量读取 和 属性对象的绑定

    网上看到的一些方法,结合我看到的 和我们现在使用的.整理成此文: 第一种方法 参见catoop的博客之 Spring Boot 环境变量读取 和 属性对象的绑定(尊重原创) 第二种方法 class不用 ...

  4. Nginx介绍

    原文:http://www.aosabook.org/en/nginx.html 作者: Andrew Alexeev nginx(发音"engine x")是俄罗斯软件工程师Ig ...

  5. linux云计算集群架构学习笔记&colon;rhel7基本命令操作

     1-3-RHEL7基本命令操作 1.1Linux终端介绍 Shell提示符 Bash Shell基本语法. 1.2基本命令的使用:ls.pwd.cd. 1.3查看系统和BIOS硬件时间. 1.4 L ...

  6. 判断是否为闰年(bool)

    bool为布尔型,只有一个字节,取值false和true #include<iostream>using namespace std;int main(){ int year; bool ...

  7. 【ANT】taskdef class org&period;programmerplanet&period;ant&period;taskdefs&period;jmeter&period;JMeterTask cannot be found using the classloader AntClassLoader&lbrack;&rsqb;解决办法

    把文件apache-jmeter-3.1\extras\ant-jmeter-1.1.1.jar复制到apache-ant-1.10.1\lib目录下即可.

  8. 如何实时查看Linux下日志

    以下以Tomcat为例子,其他WEB服务器目录自己灵活修改即可: 1.先切换到:cd usr/local/tomcat5/logs2.tail -f catalina.out3.这样运行时就可以实时查 ...

  9. Hadoop HBase概念学习系列之HFile(二十)

    HFile文件是不定长的. HFile里才是想要的真正数据,实际存储的位置,是在HDFS上.

  10. ballerina 学习十八 事务编程

    事务在分布式开发,以及微服务开发中是比较重要的 ballerina 支持 本地事务.xa 事务.分布式事务 ,但是具体的服务实现起来需要按照ballerian 的事务模型 infection agre ...

相关文章