vue父组件和子组件数据传递

1、父组件向子组件传递数据父组件：<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、父组件引入子组件，注册属性message2、子组件通过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、父组件注册事件event2、子组件由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.方法页面效果：