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

//通过属性绑定和事件回调，实现双向绑定，不需要在父子组件之间传值
<template>
  <h1>逻辑层数据：{{inputValue}}</h1>
  <input  :value = "inputValue" @input="(e)=>{inputValue = e.target.value}">
</template>

<script setup>
import { ref } from 'vue'
const inputValue = ref('输入框初始值')
</script>

//v-model可以认为是以上方式的语法糖
<input type="text" v-model="inputValue"/>

 

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

//通过属性绑定和事件回调，实现双向绑定，不需要在父子组件之间传值。获取event对象，需要指定类型，获取value值也和Vue不太一样，同时注意类型转换
<h1>逻辑层数据：@inputValue</h1>
<input value = "@inputValue" @oninput = "(ChangeEventArgs e)=>{inputValue = Convert.ToString(e.Value);}" />

@code {
    private string inputValue = "输入框初始值";
}

//@bind可以认为是以上方式的语法糖
//bind指令有三个属性，culture、format和event，其中enent用来指定更新时机，默认为onchang失去焦点时发生，此例修改为oninput输入时发生
<input @bind = "inputValue" @bind:event = "oninput" />

//Vue=====================================
//1、父组件
<template>
 <div class="Parent">
      <h1>灰色框是父组件</h1>
      <h1>父组件逻辑数据值：{{parentValue}}</h1>
      <Child :inputValue = "parentValue" 
             @update:inputValue = "(newValue)=>{parentValue = newValue}">
      </Child>
</div>
</template>

<script setup>
import Child from './components/Child.vue'
import { ref } from 'vue'
const parentValue = ref('父组件初始值')
</script>


//2、子组件
<template>
    <div class="Child">
        <h1>红色框是子组件</h1>
        <input :value = "inputValue" @input="childEmit"/>
    </div>
</template>

<script setup>
import {ref} from 'vue'
const props = defineProps(['inputValue'])
const emits = defineEmits(['update:inputValue'])
const childEmit = (e)=>{
    emits('update:inputValue',e.target.value)
}
</script>


//3、下面来分析一下这个过程：
//从案例中，我们可以看到，<Child>这个组件，实际上仅是起到搬运工的作用，①派出属性，将父组件的数据状态parentValue交给子组件内部的input消费；②拍出事件，将子组件内部的input新值，传递给父组件的数据状态parentValue消费。
//除去Child这个外壳，实际上还是逻辑层的数据状态，在和HTML标签做交互，只是因为逻辑层数据和视图层HTML标签在不同的位置，所以需要<Child>这个桥梁！


//4、自定义组件的双向绑定，可以使用v-model语法糖吗？
//可以的，但是要遵守属性和事件的命名约定，如下：
//属性名：任意名称。但如果使用【v-model="parentValue】的格式，就必须命名为modelValue
//事件名：update:属性名。但如果使用【v-model="parentValue"】的格式，就必须命名为update:modelValue
//上面的案例，我们可以使用v-model来简化一下，但只能简化父组件哦，子组件保持不变【注意如果使用v-model的最简形式，案例中子组件的属性和事件名称改一下】
<Child v-model = "parentValue"></Child>
<Child v-model:firstValue = "parentValue1" v-model:secondValue = "parentValue2"></Child>

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

//1、父组件
<div class = "Parent">
    <h1>灰色框里是父组件</h1>
    <h1>父组件逻辑数据值：@parentValue</h1>
    <Child InputValue="@parentValue" InputValueChanged="@((newValue)=>{parentValue = newValue;})"></Child>
</div>

@code {
    private string parentValue = "输入框初始值";
}

//2、子组件
<div class="Child">
    <h1>红色框里是子组件</h1>
    <input value = "@InputValue" @oninput = "ChildEmit" />
</div>

@code {

    [Parameter]
    public EventCallback<string> InputValueChanged { get; set; }

    [Parameter]
    public string? InputValue{ get; set; }

    private async Task ChildEmit(ChangeEventArgs e)
    {
        await InputValueChanged.InvokeAsync(Convert.ToString(e.Value));
    }
}


//3、分析：双向绑定的实现逻辑，和Vue基本是一样的。通过属性参数，将父组件的逻辑层数据parentValue交给子组件的input，通过EventCallback事件，将子组件input的新值，交给父组件的parentValue。本质上，还是逻辑层数据和HTML原生标签的交互，自定义组件只是玩个了寂寞。


//4、可以使用@bind的语法糖吗？肯定是可以的
//一样要遵守属性和事件的命名约定，如下：
//属性名称：任意名称
//EventCallback事件名称：属性名称Changed
//上面案例子组件不做改动，父组件可以简写为：
<Child @bind-InputValue="parentValue"></Child>