vue --父组件向子组件传递数据
父组件:
<template><div class="parent"><p>父组件:{{ msg }}</p><Child message="Hello, I am parent!"></Child></div> </template><script>import Child from './Child'export default {name: 'Parent',data () {return {msg: 'Hello world'}}} </script><style lang="less" scoped></style>
子组件:
<template><div class="child"><p>子组件:{{ message }}</p></div> </template><script>export default {name: 'Child',props: ['message'],data () {return {}}} </script><style lang="less" scoped></style>
父组件向子组件传值方式:
1、父组件引入子组件,注册属性message
2、子组件通过props来获取到注册的属性message
页面显示:
转存失败重新上传取消
2、子组件触发事件向父组件传递数据
父组件:
<template><div class="parent"><p>父组件:{{ msg }},显示子组件传来的值:{{ showChildData }}</p><Child message="Hello, I am parent!" @event="handler"></Child></div> </template><script>import Child from './Child'export default {name: 'Parent',data () {return {msg: 'Hello world',showChildData: ''}},methods: {handler (data) {console.log(data)this.showChildData = data}}} </script><style lang="less" scoped></style>
子组件:
<template><div class="child"><p>子组件:{{ message }}</p><input type="button" @click="transmit" value="向父组件传递数据"></div> </template><script>export default {name: 'Child',props: ['message'],data () {return {childData: 'Hello, I am child'}},methods: {transmit () {this.$emit('event', this.childData)}}} </script><style lang="less" scoped></style>
子组件向父组件传值方式:
1、父组件注册事件event
2、子组件由transmit事件方法,通过$emit('', data)向父组件传值
页面点击子组件按钮可以获得以下效果:
转存失败重新上传取消
3、父组件直接调取子组件数据
父组件:
<template><div class="parent"><p>显示子组件传来的值:{{ showChildData }}</p><Child ref="child"></Child><input type="button" @click="getChildData" value="获取子组件的数据"></div> </template><script>import Child from './Child'export default {name: 'Parent',data () {return {showChildData: ''}},methods: {getChildData () {this.showChildData = this.$refs.child.childData}}} </script><style lang="less" scoped></style>
子组件:
<template><div class="child"><input type="text" v-model="childData"><p>子组件:{{ childData }}</p></div> </template><script>export default {name: 'Child',data () {return {childData: 'Hello, I am child'}},methods: {}} </script><style lang="less" scoped></style>
父组件直接获取子组件数据:
1、父组件引入子组件,添加ref属性
说明:ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例
注意:只要想要在Vue中直接操作DOM元素,就必须用ref属性进行注册
2、父组件直接通过 this.$refs.child.属性 获取数据
说明:在父组件里面通过以下方式获取子组件的属性和方法
this.$refs.child.属性
this.$refs.child.方法
页面效果:
转存失败重新上传取消
4、子组件直接调取父组件数据
父组件:
<template><div class="parent"><input type="text" v-model="parentData" style="width: 500px;"><p>父组件:{{ parentData }}</p><Child></Child></div> </template><script>import Child from './Child'export default {name: 'Parent',data () {return {parentData: 'Hello, I am parent!'}},methods: {}} </script><style lang="less" scoped></style>
子组件:
<template><div class="child"><p>子组件:{{ showParentData }}</p><input type="button" @click="getParentData" value="获取父组件的数据"></div> </template><script>export default {name: 'Child',data () {return {showParentData: ''}},methods: {getParentData () {this.showParentData = this.$parent.parentData}}} </script><style lang="less" scoped></style>
父组件直接获取子组件数据:
1、父组件引入子组件
2、子组件直接通过 this.$parent.属性 获取数据
说明:在子组件里面通过以下方式获取子组件的属性和方法
this.$parent.属性
this.$parent.方法
页面效果:
转存失败重新上传取消
来源:https://segmentfault.com/a/1190000018862352?utm_source=sf-similar-article