Vue- 组件与props属性的用法
2017-02-22 18:22
696 查看
在 Vue 里,一个组件实质上是一个拥有预定义选项的一个 Vue 实例:(单独测试的时候记得new Vue()渲染)
现在你可以在另一个组件模板中写入它:
但是这样会为每个 todo 渲染同样的文本,这看起来并不是很酷。我们应该将数据从父作用域传到子组件。让我们来修改一下组件的定义,使得它能够接受一个
props 把数据传给子组件!!!
“prop” 是组件数据的一个字段,期望从父作用域传下来。子组件需要显式地用 props 选项 声明
props:
现在,我们可以使用
Vegetables
Cheese
Whatever else humans are supposed to eat
// Define a new component called todo-itemVue.component('todo-item', { template: '<li>This is a todo</li>'}) |
<ol> <!-- Create an instance of the todo-item component --> <todo-item></todo-item></ol> |
prop字段(属性):
props 把数据传给子组件!!!
“prop” 是组件数据的一个字段,期望从父作用域传下来。子组件需要显式地用 props 选项 声明
props:
Vue.component('todo-item', { // The todo-item component now accepts a // "prop", which is like a custom attribute. // This prop is called todo. props: ['todo'], template: '<li>{{ todo.text }}</li>'}) |
v-bind指令将 todo 传到每一个重复的组件中:
<div id="app-7"> <ol> <!-- Now we provide each todo-item with the todo object --> <!-- it's representing, so that its content can be dynamic --> <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> </ol></div> |
Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>'})var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { text: 'Vegetables' }, { text: 'Cheese' }, { text: 'Whatever else humans are supposed to eat' } ] }}) |
Cheese
Whatever else humans are supposed to eat
相关文章推荐
- Vue-组件props属性再回顾
- Vue系列: 如何通过组件的属性props设置样式
- vue使用组件时,需要给传递的props属性默认值细节
- Vue系列: 如何通过组件的属性props设置样式
- Vue 使用Props属性实现父子组件的动态传值
- vue组件中 IS 用法
- Vuejs——(9)组件——props数据传递
- Vue.js 系列教程 2:组件,Props,Slots
- 在Vue组件上动态添加和删除属性
- Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
- ExtJS表单组件RadioGroup属性用法(选中初始值、表单加载,选中取值)的要点
- 【连载】研究EasyUI系统—Tree组件(基本属性和用法)
- Vue.js 系列教程 2:组件,Props,Slots
- Vue.js 系列教程 2:组件,Props,Slots
- React--Components and Props(组件和属性组件)
- Vue的Props属性概述
- vue的props实现子组件随父组件一起变化
- 简单理解vue中Props属性
- Vue.js 系列教程 2:组件,Props,Slots
- ReactJS学习系列课程(props 组件属性)