Vue实现的父组件向子组件传值功能示例
更新时间：2019年01月19日 14:09:33 作者：黎成诃月
这篇文章主要介绍了Vue实现的父组件向子组件传值功能,结合完整实例形式简单分析了vue.js组件传值的相关操作技巧,需要的朋友可以参考下
本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行结果：
希望本文所述对大家vue.js程序设计有所帮助。
相关文章
今天小编就为大家分享一篇vue 解决路由只变化参数页面组件不更新问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
keepalive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染，也就是所谓的组件缓存，这篇文章主要介绍了说说你对Vue的keep-alive的理解,需要的朋友可以参考下2022-11-11
左右滚动的效果,在日常开发中比较常见，这篇文章主要给大家介绍了关于vue实现左右滑动效果的相关资料,需要的朋友可以参考下2021-05-05
在Vue中使用Bootstrap是常见的前端开发实践之一,结合了Vue的响应式数据绑定与Bootstrap的UI组件和布局系统,能够快速实现现代化的网页应用,本文将详细介绍如何在Vue中使用Bootstrap,从安装到高级使用,涵盖了各种常见的开发场景和技巧,需要的朋友可以参考下2024-12-12
本篇文章主要介绍了vue 挂载路由到头部导航的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了详解Vue项目部署遇到的问题及解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
今天通过本文给大家分享antd+vue实现动态验证循环属性表单的思路，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-09-09
在 Vue 3 中,覆盖组件样式的方法与 Vue 2 相似,但由于 Vue 3 更多地依赖于 CSS 的模块化,一些最佳实践可能会有所不同,下面就跟随小编一起来了解一下吧2024-04-04
Element-ui表单校验规则，使得错误提示可以直接在form-item下面显示，无需弹出框，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要介绍了vue实现局部刷新的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
最新评论