父子组件(爷孙传参) 注:不是响应式的"/>
vue2.0 非父子组件(爷孙传参) 注:不是响应式的
爷爷组件
<template>
{{title}}<button @click="setTitle">改变title</button><br><Son />
</template><script>
import Son from "./components/Son"
export default {components:{Son},//下面两种方式 要是穿对象的话就得用return的方式 // provide:{// title:title,// userInfo:{// name:"张三",// age:40// }// },provide(){return{title:this.title,userInfo:{name:"张三",age:40}}},methods:{setTitle(){this.title = "修改后的Title"console.log(this.title)}}}
</script><style></style>
父组件
<template><Grandson />
</template><script>
import Grandson from "./Grandson"
export default {components:{Grandson}}
</script><style></style>
孙子组件
<template>孙子 {{title}}<br/>{{userInfo}}
</template><script>
export default {inject:["title","userInfo"]}
</script><style></style>
更多推荐
vue2.0 非父子组件(爷孙传参) 注:不是响应式的
发布评论