vue层级传参、爷孙传参、孙爷传参、跨层传参

层级传参、爷孙传参、孙爷传参、跨层传参"/>

vue层级传参、爷孙传参、孙爷传参、跨层传参

爷----父----子 传参

爷传子【传参】

//  grandpa.vue爷爷级
<template><parent msg="msg from grandpa" number="112"></parent>
</template>
// parent.vue父亲级
<template>//直接转发给子，不做处理<child v-bind="$attrs"></child>
</template>
// child.vue儿子级
// 儿子使用爷爷级传入的参数
this.$attrs.msg
this.$attrs.number

子-----父-----爷 调用方法/传参

// grandpa.vue爷爷级
<template><parent @foo="onFoo"></parent>
</template>
<script>methods:{onFoo(){console.log('这个方法我不执行，让儿子级页面调用触发执行')}}
</script>// parent.vue父亲级
<template>// 直接转发给父，不做处理 <child v-on="$listeners"></child>
</template>// child.vue儿子级
<template><button @click="sendToParent">触发爷爷级的onFoo事件</button>
</template><script>methods:{sendToParent(){this.$emit('foo')}}
</script>

后代传参祖传后代

// 后代传参
//provide/inject// grandpa.vue祖级
<template><child></child>
</template><script>export default {provide(){return {// retutn 出来的值供所有后代共享bar:"后代使用的bar"}}}
</script>// child.vue后代级无论多少级，只要是后代
<template><h1>{{bar}}</h1>
</template><script>export default {// 后代要使用，需要先注入，类似于props，页面上就可直接使用inject:['bar']//也可以写成对象的形式，起别名inject:{bar1:'bar'//这个bar是祖定义的，bar1是别名，页面上此时需使用bar1}，//更高级一点，设置一个默认值inject:{bar1:{form:'bar',default:'自己定义一个默认值先'}}}
</script>