首页 > 代码库 > Vue 给子组件传递参数
Vue 给子组件传递参数
Vue 给子组件传递参数
- 首先看个例子吧
原文
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 给子组件传递参数
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。