Vue使用props父子组件传递数据
栏目: JavaScript · 发布时间: 5年前
内容简介:父组件子组件父组件
父组件
<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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
PHP高级开发技术与应用
曹铁群、孙一江、张永学 / 清华大学出版社 / 2002-5-1 / 32.00
作为一本介绍PHP高级开发技术的书籍,本书并不像一般介绍PHP语言的书籍那样讲述大量的语法规则,罗列大量的函数,而是着眼于PHP在Web中的实际应用,特别是PHP对最新技术的支持,比如WAP技术、XML技术等。 本书涉及到的内容主要有:高级环境配置、高级语法和应用、正则表达式、面向对象技术、高级图像技术、用PHPLIB实现模板的处理、用PHPDoc实现文档的自动生成、PHP与组件技术、PH......一起来看看 《PHP高级开发技术与应用》 这本书的介绍吧!