//Vue====================================================================

//祖先组件Grandparent。通过provide提供数据，可以是任何值、任何响应式数据、任何方法

<template>

  <div class="grandparent">

    <h1>这是是祖组件</h1>

    <Parent>

      //Parent组件里嵌套着<Child></Child>，祖传孙的任务就是将值传给Child

    </Parent>

  </div>

</template>

<script setup>

import Parent from './components/Parent.vue'

import Child from './components/Child.vue'

import {ref,provide} from 'vue'

//以键值对的方式提供单个值，其中键key可以是字符串，也可以是一个Symbol

provide('name','functionMC')

//如果要传递多个值，多次provide就可以

const address = ref('GuangZhou')

provide('age',18)

//提供一个响应式数据

provide('address',address)

//一个key，对应多个响应式数据

const likeCode = ref(['C#','JS'])

const likeFruit = ref(['apple','bananer'])

provide('like',{likeCode,likeFruit})

</script>

//子孙组件Child。任何需要数据的子孙组件，都可以inject注入数据，Parent组件一样也可以注入。

<template>

  <div class="child">

    <h1>红色是孙组件</h1>

    <h4>姓名：{{name}}</h4>

    <h4>年龄：{{age}}</h4>

    <h4>地址：{{address}}</h4>

    <h4>喜欢代码：</h4>

    <ul><li v-for = "item in likeCodes">{{item}}</li></ul>

    <h4>喜欢水果：</h4>

    <ul><li v-for = "item in likeFruits">{{item}}</li></ul>

    <h4>老祖说：{{grandparentSay}}</h4>

  </div>

</template>

<script setup>

import { inject } from 'vue'

//直接通过键来注入

const name = inject('name')

const age = inject('age')

const address = inject('address')

//接受一个键里的多个值

const {likeCodes,likeFruits } = inject('like')

//注入时可以设置默认值，如果找不到键，则使用默认值

const grandparentSay = inject('grandparentSay','还没有说')

</script>

//Blazor===================================================================================

//祖组件grandparent。

//在模板中使用<CascadingValue>组件传值。比较麻烦，传递多值时要不断的嵌套，组件放在最内层。

//推荐以Name-Value键值对的形式来传递，传递的数据，可以是值，也可以是属性，可以是任何类型。

//CascadingValue也可以缺省Name的方式传值，接收时，需要使用类型来匹配，自行查文档，不推荐

<div class = "grandparent">

    <h1>灰色是祖组件</h1>

    <CascadingValue Name="name" Value="@("functionMC")">

        <CascadingValue Name="age" Value="@age">

            <CascadingValue Name="likeFruits" Value="@likeFruits">

                <Parent>

                      //Parent父组件中嵌套着孙组件<Child></Child>

                </Parent>

            </CascadingValue>

        </CascadingValue>

    </CascadingValue>

</div>

@code {

    private int age = 18;

    private string[] likeFruits = new string[] { "apple", "bananer" };

}

//子组件

<div class="Child">

    <h1>红色是孙组件</h1>

    <h5>姓名：@Name</h5>

    <h5>年龄：@Age</h5>

    <h5>喜欢的水果：</h5>

    <ul>

        @foreach (var item in LikeFruits)

        {

            <li>@item</li>

        }

    </ul>

</div>

@code {

    //CascadingParameter特性的Name参数，就是键

    //可以设置默认值，当找不到键时，使用默认值

    //强类型，提供和接收的数据类型要一致

    [CascadingParameter(Name = "name")]

    private string Name { get; set; } = "MC";

    [CascadingParameter(Name = "age")]

    private int? Age { get; set; }

    [CascadingParameter(Name = "likeFruits")]

    private string[]? LikeFruits { get; set; }

}

//Vue

//祖先组件Grandparent。

<template>

  <div class="grandparent">

    <h1>灰色是祖组件</h1>

    <h1>{{look}}</h1>

    <Parent></Parent>

  </div>

</template>

<script setup>

import Parent from './components/Parent.vue'

import Child from './components/Child.vue'

import {ref,provide} from 'vue'

//一个键，提供一个响应式数据和相应的方法

const look = ref({height:170,weight:130})

function changeLook(){ look.value.height = 175 }

provide('look',{look,changeLook})

</script>

//子孙组件Child。

<template>

  <div class="child">

    <h1>红色是孙组件</h1>

    <h4>样貌：{{look}}</h4>

  </div>

  <button @click="changeLook()">修改样貌</button>  //直接在子组件中调用祖先提供的方法

</template>

<script setup>

import { inject } from 'vue';

//通过解构方法，注入响应式数据及其方法

const {look,changeLook} = inject('look')

</script>