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. 方法
页面效果：