Vue 给子组件传递参数

  1. 首先看个例子吧

原文

html

<div class="container" id="app">
<div class="row">
<div class="col-sm-12">
<h3>My Components</h3>
<todo-item :todos="todos01"></todo-item>
</div>
</div>
</div>
<script type="x-template" id="component-todo">
<ul class="list-group" v-if="todos && todos.length > 0">
<li class="list-group-item" v-for="todo in todos" :class="{special: !todo.isSpecial}">
{{todo.title}}
<button class="btn btn-xs pull-right" :class="{'btn-success': todo.isSpecial,'btn-danger': !todo.isSpecial }" @click="changeActive(todo)">
{{todo.isSpecial ? 'DONE' : 'What?'}}
</button>
</li>
</ul>
<div v-else>
<p>There isn't any todo</p>
</div>
</script>

js

var todoItem = Vue.extend({
template: '#component-todo',
props: ['todos'],
methods: {
changeActive(todo) {
todo.isSpecial = !todo.isSpecial;
}
}
})
Vue.component('todo-item', todoItem);
new Vue({
el: '#app',
data: {
todos: [{
id: 1,
title: 'zgo to shoping',
isSpecial: false
}, {
id: 2,
title: 'jump for sport',
isSpecial: true
}, {
id: 3,
title: 'welcome vueJs',
isSpecial: true
}],
todos01: [{
id: 1,
title: 'so so crazy',
isSpecial: true
}, {
id: 2,
title: 'i v ini',
isSpecial: false
}, {
id: 3,
title: 'nothing is there',
isSpecial: true
}]
}
})

<todo-item :todos="todos01"></todo-item>

todos是组件中通过props传递过来的参数,todos01是组件上一层定义的

可以尝试将todos01换成todos看看效果

Vue 给子组件传递参数的更多相关文章

  1. vue父组件向子组件传递参数

    父组件中引用的子组件 <pics :is-pics="showpics" // 这是我们要传递的参数 :is-product="productMsg" : ...

  2. props 父组件给子组件传递参数

    话不多说,直接上代码 父组件: <span><humidity-component ref="soilHumidityBot" :title='title2'&g ...

  3. vue-父组件传递参数到子组件

    案例: 父组件 <template> <div id="app"> <h1>vuex</h1> <h3>count:{{ ...

  4. Vue父组件与子组件传递事件/调用事件

    1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...

  5. 浅入深出Vue:子组件与数据传递

    上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...

  6. Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

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

  7. Vue 父组件往子组件传递方法

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

  8. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  9. Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

随机推荐

  1. Solr_全文检索引擎系统

    Solr介绍: Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务.Solr可以独立运行在Jetty.Tomcat等这些Servlet容器中. Solr ...

  2. ASP.NET Core 折腾笔记一

    前言: 在ASP.NET Core 1.0时,曾折腾过一次,后因发现不了System.Data而停止. 更因VS2015提示过期Delete掉VS了,其实主要还是笔记本的硬盘空间吃紧. 快双十一了,本 ...

  3. 【AutoMapper官方文档】DTO与Domin Model相互转换(上)

    写在前面 AutoMapper目录: [AutoMapper官方文档]DTO与Domin Model相互转换(上) [AutoMapper官方文档]DTO与Domin Model相互转换(中) [Au ...

  4. Dapper.Contrib:GetAsync<T> only supports an entity with a [Key] or an [ExplicitKey] property

    异常处理:http://www.cnblogs.com/dunitian/p/4523006.html#dapper 原来Model是这样滴 修改后是这样滴 注意点:Model里面的Table和Key ...

  5. 08.LoT.UI 前后台通用框架分解系列之——多样的Tag选择器

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  6. OVS local network 连通性分析 - 每天5分钟玩转 OpenStack(132)

    前面已经创建了两个 OVS local network,今天详细分析它们之间的连通性. launch 新的 instance "cirros-vm3",网络选择 second_lo ...

  7. [C#] 走进 LINQ 的世界

    走进 LINQ 的世界 序 在此之前曾发表过三篇关于 LINQ 的随笔: 进阶:<LINQ 标准查询操作概述>(强烈推荐) 技巧:<Linq To Objects - 如何操作字符串 ...

  8. 马里奥AI实现方式探索 ——神经网络+增强学习

    [TOC] 马里奥AI实现方式探索 --神经网络+增强学习 儿时我们都曾有过一个经典游戏的体验,就是马里奥(顶蘑菇^v^),这次里约奥运会闭幕式,日本作为2020年东京奥运会的东道主,安倍最后也已经典 ...

  9. fir.im Weekly - 关于 iOS10 适配、开发、推送的一切

    "小程序"来了,微信变成名副其实的 Web OS,新一轮的Web App 与Native App争论四起.程序员对新技术永远保持灵敏的嗅觉和旺盛的好奇心,@李锦发整理了微信小程序资 ...

  10. Entity Framework 教程——Entity Framework中的实体类型

    Entity Framework中的实体类型 : 在之前的章节中我们介绍过从已有的数据库中创建EDM,它包含数据库中每个表所对应的实体.在EF 5.0/6.0中,存在POCO 实体和动态代理实体两种. ...