vue父子通信
首先在组件创建中创建子组件Todos.vue
<template>
<div class="hello">
<h1>todos show</h1>
<ul class="list-group">
<li class="list-group-item"
v-bind:class="{'complete':todo.completed}"
v-for="(todo,index) in todos">
{{todo.title}}
<button class="btn btn-warning pull-right"
v-on:click="deleteTodo(index)">
delete
</button>
<button class="btn btn-warning pull-right"
v-bind:class="[todo.completed ? 'btn-danger' :'btn-success']"
v-on:click="toggleCommpletion(todo)">
{{todo.completed?'undo':'todo'}}
</button>
</li>
</ul>
</div>
</template>
<style>
.completed {
color: darkgreen;
}
</style>
<script>
export default {
props: ['todos'],
methods: {
deleteTodo(index){
this.todos.splice(index, 1)
},
toggleCommpletion(todo){
todo.completed = !todo.completed
}
}
}
</script>
要注意的是要告诉子组件有一个todos属性,就在组件中定义props属性值;
再根组件中引入子组件
import Todos from './components/Todos'
根组件中定义组件是要绑定组件属性即::todos=“todos”
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
<todos :todos="todos"></todos>
</div>
</template> <script>
import Hello from './components/Hello'
import Todos from "./components/Todos"
import TodoFrom from "./components/TodoFrom" export default {
name: 'app',
data(){
return {
todos:[
{id:1,title:'learn vue',completed:false,}
]
}
},
computed:{
todoCount(){
return this.todos.length;
}
},
components:{
Todos,Hello,TodoFrom
}
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
需要注意是:data属性要定义成方法进行返回,这样子组件才能接受到
vue父子通信的更多相关文章
- vue 父子通信过程
1.概述 每个 Vue 实例都实现了事件接口,即: 使用 $on(eventName) 监听事件 使用 $emit(eventName, optionalPayload) 触发事件 2.示例一(未传递 ...
- vue父子通信的基本使用
项目中没怎么用过父子通信,很多页面都是路由切换实现的,后来做首页的时候发现首页的路径没法配置,我强行在原先的首页上写了个子组件,通过判断路径使其强行跳转实现的 这个时候跳转页面的时候就要使用到了父子间 ...
- vue 父子通信
节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法.更推荐用 props 和 events 实现父子组件通信
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- angular,vue,react的父子通信
父子通信 父传子 vue: 父组件:<child :msg="datamsg" ></child> //子组件的msg属性上加数据,datamsg是数据 子 ...
- vue父子组件通信高级用法
vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...
- vue 父子组件通信详解
这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...
- vue之非父子通信
一.非父子通信: 思路: 找个中间存储器,组件一把信息放入其中,组件二去拿 代码如下: let hanfei = new Vue(); # 实列化个空的vue对象,作为中间存储器来时间 ...
- vue第九单元(非父子通信 events 单向数据流)
第九单元(非父子通信 events 单向数据流) #课程目标 了解非父子组件通信的原理,熟练实现非父子组件间的通信(重点) 了解单向数据流的含义,并且明白单向数据流的好处 #知识点 #1.非父子组件间 ...
随机推荐
- Android用Gson解析JSON字符串
在volley框架中有一个 protected Response<Result<T>> parseNetworkResponse(NetworkResponse respons ...
- throw、try 和 catch
try 语句允许我们定义在执行时进行错误测试的代码块. catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块. JavaScript 语句 try 和 catch 是成对出现的. ...
- 关于ORM,以及Python中SQLAlchemy的sessionmaker,scoped_session
orm(object relational mapping):对象关系映射. python面向对象,而数据库是关系型. orm是将数据库关系映射为Python中的对象,不用直接写SQL. 缺点是性能略 ...
- 初识用.NET Remoting来开发分布式应用
一..NET Remoting简介: .NET Remoting从某种意义上讲是DCOM的替代品.ASP.NET Web服务十分有用,但是这项技术在企业内联网的解决方案中,对于某些业务请求来说并不快, ...
- ORA-12541:无监听错误解决办法
http://jingyan.baidu.com/article/03b2f78c7a0ab75ea237ae33.html 1. 从开始菜单中打开“Oracle Net Configuratio ...
- ncdu 查找linux下最占空间的文件(交互式查询)
安装 wget -c https://dev.yorhel.nl/download/ncdu-1.11.tar.gz tar xzvf ncdu-1.11.tar.gz cd ncdu-1.11 ./ ...
- oscache使用经历
oscache作为一款老的本地缓存,应用场景主要有页面缓存和对象缓存.这里拿在maven项目中使用oscache作为对象缓存举例说明下用法: 1.导入jar包 <dependency> & ...
- eclipse配置storm1.1.0开发环境并本地跑起来
storm的开发环境搭建比hadoop(参见前文http://www.cnblogs.com/wuxun1997/p/6849878.html)简单,无需安装插件,只需新建一个java项目并配置好li ...
- 分布式缓存系统 Memcached 半同步/半异步模式
在前面工作线程初始化的分析中讲到Memcached采用典型的Master_Worker模式,也即半同步/半异步的高效网络并发模式.其中主线程(异步线程)负责接收客户端连接,然后分发给工作线程,具体由工 ...
- linux 根据进程名查看其占用的端口
linux 根据进程名查看其占用的端口 pasting $ netstat -nap | grep pid //查看进程ID 所占的端口 netstat -lnp 查看端口所在的进程 will ...