Vue实现的父组件向子组件传值功能示例

2019-11-19 12:15:21

字体：大中小

来源：转载

供稿：网友

本文实例讲述了Vue实现的父组件向子组件传值功能。分享给大家供大家参考，具体如下：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 父组件向子组件传值</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="app">  <!-- 把字符串传给子组件 -->  <ol>  <todo-item v-for="item in sites" v-bind:item="item"></todo-item>   </ol>  <!-- 把数组的值传给子组件 -->  <myname :name="name"></myname></div><script>Vue.component('todo-item', { // props: ['item'], props: {  item : String, }, template: '<li>{{ item.text }}</li>'})Vue.component('myname', { props: ['name'], // props: {  // name : Array, // }, template: '<div><li v-for="(item,index) in name">{{ item.text }}-{{index+1}}</li></div>' //需要有一个根元素标签包含子组件循环，vue react都要把东西变成一个块才能循环出来})new Vue({ el: '#app', data: {  sites: [   { text: 'jb51' },   { text: 'Google' },   { text: 'Taobao' }  ],  name: [   { text: 'lee' },   { text: 'jane' },   { text: 'nike' }  ] }})</script></body></html>

这里使用在线HTML/CSS/JavaScript代码运行工具http://tools.VeVB.COm/code/HtmlJsRun测试上述代码，可得如下运行结果：