//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>