parent.vue
<template>
<div id="app">
<div>父组件：{{message}}</div>
<ChildrenComponet :message="message" @changeMsgFn="message=$event"/>
</div>
</template>
<script>
import ChildrenComponet from './components/ChildrenComponet.vue'
export default {
name: 'App',
data(){
return{
message:'默认数据'
}
},
components: {
ChildrenComponet
},
methods:{
changeMessage(msg){
console.log(msg)
this.message = 'Bye';
}
}
}
</script>
children.vue
<template>
<div>
子组件：{{message}}
<button @click="handleClick">按钮</button>
</div>
</template>
<script>
export default {
props:['message'],
methods:{
handleClick(){
this.$emit('changeMsgFn','Bye')
}
}
}
</script>
<style>
</style>
按按钮之前：
按按钮之后：
parent.vue
<template>
<div id="app">
------父组件------
{{message}}
<ChildrenComponet :message="message" :changeMsgFn="changeMessage"/>
</div>
</template>
<script>
import ChildrenComponet from './components/ChildrenComponet.vue'
export default {
name: 'App',
data(){
return{
message: 'hello!'
}
},
components: {
ChildrenComponet
},
methods:{
changeMessage(){
this.message = 'Bye'
}
}
}
</script>
<template>
<div>
------子组件------
{{message}}
<button @click="changeMsgFn">按钮</button>
</div>
</template>
<script>
// import GrandChild from './GrandChild.vue'
export default {
props: ['message', 'changeMsgFn'],
components:{
// GrandChild
},
data(){
return {
}
},
methods:{
}
}
</script>
点击按钮前：
点击按钮后：
$parent和$children
parent.vue
<template>
<div id="app">
<div>父组件：{{message}}</div>
<ChildrenComponet :message="message"/>
<button @click="changeChildrenNumber">改变子number</button>
</div>
</template>
<script>
import ChildrenComponet from './components/ChildrenComponet.vue'
export default {
name: 'App',
data(){
return{
message:'默认数据'
}
},
components: {
ChildrenComponet
},
methods:{
changeChildrenNumber(){
this.$children[0].number = 50
}
}
}
</script>
children.vue
<template>
<div>
子组件：{{number}}
<button @click="handleClick">按钮</button>
</div>
</template>
<script>
export default {
data(){
return {
number:'初始number'
}
},
props:['message'],
methods:{
handleClick(){
this.$parent[0].message = '测试$parent，我是子组件'
}
}
}
</script>
<style>
</style>
点击“改变子number”前：
点击“改变子number”后
children.vue
<template>
<div>
子组件：{{number}}
<button @click="handleClick">改变父number，测试$parent</button>
</div>
</template>
<script>
export default {
data(){
return {
number:'初始number'
}
},
methods:{
handleClick(){
this.$parent.message = '改变$parent成功'
}
}
}
</script>
<style>
</style>
parent.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<div>父组件：{{message}}</div>
<ChildrenComponet/>
<button @click="changeChildrenNumber">改变子number</button>
</div>
</template>
<script>
import ChildrenComponet from './components/ChildrenComponet.vue'
export default {
name: 'App',
data(){
return{
message:'默认数据'
}
},
components: {
ChildrenComponet
},
methods:{
changeChildrenNumber(){
this.$children[0].number = 50
}
}
}
</script>
点击前：
点击后：
parent.vue
<template>
<div id="app">
<ChildrenComponet/>
</div>
</template>
<script>
import ChildrenComponet from './components/ChildrenComponet.vue'
export default {
name: 'App',
data(){
return{
}
},
provide:{
message:"hello"
},
components: {
ChildrenComponet
},
methods:{
}
}
</script>
children.vue
<template>
<div>
子组件：{{message}}
</div>
</template>
<script>
export default {
inject:['message'],
data(){
return {
}
},
methods:{
}
}
</script>
运行结果：
$attrs+$listeners
parent.vue
<template>
<div id="app">
------父组件------
<div>姓名:{{ name }}</div>
<div>年龄:{{ age }}</div>
<ChildrenComponet :name="name" :age="age" @changeName="changeName"/>
</div>
</template>
<script>
import ChildrenComponet from './components/ChildrenComponet.vue'
export default {
name: 'App',
data(){
return{
name:'小米',
age: 33,
}
},
components: {
ChildrenComponet
},
methods:{
changeName(){
this.name = '小夏'
}
}
}
</script>
children.vue
<template>
<div>
------子组件------
<button @click="$listeners.changeName">按钮</button>
<GrandChild v-bind="$attrs" />
</div>
</template>
<script>
import GrandChild from './GrandChild.vue'
export default {
components:{
GrandChild
},
data(){
return {
}
},
methods:{
}
}
</script>
GrandChildren.vue
<template>
<div>
------孙组件------
姓名：{{$attrs.name}}
年龄：{{$attrs.age}}
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
运行结果（从父亲传到了孙子）：
点击按钮后：
parent.vue
<template>
<div id="app">
------父组件------
<ChildrenComponet ref="childComp"/>
<button @click="changeName">按钮</button>
</div>
</template>
<script>
import ChildrenComponet from './components/ChildrenComponet.vue'
export default {
name: 'App',
data(){
return{
name:'小米',
age: 33,
}
},
components: {
ChildrenComponet
},
methods:{
changeName(){
console.log('点击前', this.$refs.childComp.age)
this.$refs.childComp.changeAge()
console.log('点击后', this.$refs.childComp.age)
}
}
}
</script>
children.vue
<template>
<div>
------子组件------
</div>
</template>
<script>
// import GrandChild from './GrandChild.vue'
export default {
components:{
// GrandChild
},
data(){
return {
age:20
}
},
methods:{
changeAge(){
this.age = 50
}
}
}
</script>
点击后：
