vue给组件传递不同的值

这里讲解一下Vue 官网的一个实例，Vue将数据遍历传递给多个组件，这个是我们实际开发中常做的事情。一般大型应用都是使用组件搭建起来的，我们需要给组件传递不同的值，来实现不同的展现，实现代码的复用。

<!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>Vue实例：父组件给子组件传递不同的值</title><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<script>
window.onload = function(){//全局创建一个Vue组件Vue.component('todo-item', {props: ['todo'],template: '<li>{{ todo.text }}</li>'})//创建一个vue实例var app7 = new Vue({el: '#app',data: {groceryList: [{ id: 0, text: '蔬菜' },{ id: 1, text: '奶酪' },{ id: 2, text: '随便其它什么人吃的东西' }]}})
}</script>
<body><div id="app"><ol><!-- 现在我们为每个 todo-item 提供 todo 对象todo 对象是变量，即其内容可以是动态的。我们也需要为每个组件提供一个“key”。--><todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item></ol></div>
</body>
</html>

代码分析：

这里我直接使用了一个Vue的CDN，然后实例化Vue对象就可以使用。

创建一个vue实例

    var app7 = new Vue({el: '#app',data: {groceryList: [{ id: 0, text: '蔬菜' },{ id: 1, text: '奶酪' },{ id: 2, text: '随便其它什么人吃的东西' }]}})

全局创建一个Vue组件

    Vue.component('todo-item', {props: ['todo'],template: '<li>{{ todo.text }}</li>'})

通过Vue的实例给组件赋不同的值（通过bind绑定值到一个变量上，子组件通过props接受传入的这个变量值）

    <div id="app"><ol><!-- 现在我们为每个 todo-item 提供 todo 对象todo 对象是变量，即其内容可以是动态的。我们也需要为每个组件提供一个“key”。--><todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item></ol></div>

vue给组件传递不同的值相关推荐

Vue父子组件传递数据
<template><div><!-- <div>< ...
Vue父子组件传递/子传父
1.子传父的意思就是,,子组件内容传给父组件,,使父组件可以随时使用子组件传来的数据,使用方法为:自定义函数 1.首先我们来做一个仿淘宝侧边栏商品,点击或者鼠标移动到上面出现内容商品案例 2.以上面这 ...
VUE子组件如何改变父组件传来的值，以及VUE子组件如何修改父组件的值，以及父组件修改子组件的值
一)子组件修改父组件传来的值: 父组件传递给我一个名为deptName数据,但是现在我要在子组件中修改它的值并且实时更新页面,直接this.deptName是不能直接修改他的值的,所以我采用了使用一个 ...
VUE 子组件向父组件传值（含传多值以及添加额外参数场景）
一.子组件向父组件传递一个值子组件: this.$emit('change', this.value); 父组件:  <editable-ce ...
vue子组件methods中获取props的值
最近用vue练习项目,想在子组件中使用props中的值,但是在mounted中没有办法拿,最后终于搞明白了这里我简单说一下父组件给子组件传值的两种情况(静态跟动态的数据). 父组件中: <te ...
reac——父组件向子组件传递值，子组件何时能同步获得父组件改变后的值
//这里是父组件的代码:export default class HeaderCom_son extends React.Component {constructor(props) {super(pr ...
vue 子组件调用父组件方法、值（父传子）；父组件调用子组件方法、值（子传父）。
一.子组件调用父组件方法(父传子-方法) 场景:子组件是弹出框组件.当点击确定时,将新增的值增加到父组件的列表.就要调用父组件的getLIst()方法. 代码: //父组件利用@子组件方法名=&qu ...
Vue 父子组件间的通信
前言在 Vue 项目中父子组件的通信是非常常见的,最近做项目的时候发现对这方面的知识还不怎么熟练,在这边做一下笔记,系统学习一下吧. 1 父组件传值给子组件 1.1 传值写法父组件传值给子组件,这 ...
vue父子组件传值：详解父组件向子组件传值（props）
vue父子组件传值:父组件向子组件传值用的是props 1.定义父组件 1)父组件想要向子组件传值时,那么需要在子组件引入的地方绑定一个属性,属性值就是要传的数据,并且要在父组件中引入子组件. 2)这 ...

vue给组件传递不同的值

代码分析：

vue给组件传递不同的值相关推荐

最新文章

热门文章