Vue使用props父子组件传递数据
栏目: JavaScript · 发布时间: 7年前
内容简介：父组件子组件父组件
父组件
<template>
<div>
<demo :msg='msgData' :math = 'mathData' ></demo>
</div>
</template>
<script>
import Demo from './Demo.vue'
export default {
data () {
return {
msgData:'从父组件接收来的数据',
mathData : 2
}
},
components : {
Demo
}
}
</script>
子组件
<template>
<div>
<p>{{msg}}</p>
<p>{{math}}</p>
</div>
</template>
<script>
export default {
name: 'demo',
props: [ 'msg' , 'math'],
}
</script>
父子组件传递函数
父组件
<template>
<div>
<demo :fn = 'myFunction' ></demo>
</div>
</template>
<script>
import Demo from './Demo.vue'
export default {
components : {
Demo
},
methods: {
myFunction () {
console.log('vue')
}
}
}
</script>
子组件
<template>
<div>
<button @click='fn'>按钮</button>
</div>
</template>
<script>
export default {
name: 'demo',
props: [ 'fn' ],
}
</script>
另外，当传递的数量一旦多到已经让原子化不再结构清晰的时候，通过一个对象传递显得更为简洁明了。
父子组件传递对象数据
父组件
<template>
<div>
<demo v-bind= 'msg' ></demo>
</div>
</template>
<script>
import Demo from './Demo.vue'
export default {
components : {
Demo
},
data () {
return {
msg : {a:1,b:2}
}
}
}
</script>
子组件
<template>
<div>
<button>按钮</button>
</div>
</template>
<script>
export default {
name: 'demo',
props: ['a','b'],
created () {
console.log(this.a)
console.log(this.b)
},
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
测试驱动的JavaScript开发
Christian Johansen / 赵勇、程德、凌杰、高博 / 机械工业出版社 / 2012-2-9 / 69.00元
本书是一本完整的、基于最佳实践的JavaScript敏捷测试指南，同时又有着测试驱动开发方法（TDD）所带来的质量保证。领先一步的JavaScript敏捷开发者Christian Johansen的讨论涵盖了将最先进的自动化测试用于JavaScript开发环境的方方面面，带领读者走查整个开发的生命周期，从项目启动到应用程序部署。本书的主要内容包括：掌握自动化测试和TDD；构建有效的自动化测试工作流......一起来看看 《测试驱动的JavaScript开发》 这本书的介绍吧!
