/* 有时候为什么v-model后面要跟:title，这是什么用法？*/

<div id="app" class="demo">
  <my-input v-model="message"></my-input>
 </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Java无难事'
      }
    }
  });
  app.component ('MyInput', {
    data() {
      return {
        inpuStyles: {
          'background-color': '#cdcdcd',
          opcity: 0.5
        },
      }
    },
    props: ['modelValue'],
    template: `
       <div>
        <input :value="modelValue"
        :style="inpustyles"
        @input="$emit('update:modelValue', $event.target.value)">
        <label>{{ modelValue }}</label>
      </div>
    `
  });
  /* v-model="message" 有时候为什么v-model后面要跟:title，这是什么用法？*/ 
  /*在这个例子里，是不是父组件是myinput，那子组件是哪个？
  把父组件message的值传给子组件吗？
  还是说myinput是子组件？到底哪个是子组件？父组件没有名字吗？
  这无所谓子组件不子组件吧
  只是在组件中使用model命令，并不是在子组件中使用model命令*/
app.mount('#app')
    </script>

<div id="app" class="demo">
  <my-input v-model="message"></my-input>
 </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Java无难事'
      }
    }
  });
  app.component ('MyInput', {
    data() {
      return {
        inpuStyles: {
          'background-color': '#cdcdcd',
          opcity: 0.5
        },
      }
    },
    props: ['modelValue'],
    template: `
       <div>
        <input :value="modelValue"
        :style="inpustyles"
        @input="$emit('update:modelValue', $event.target.value)">
        <label>{{ modelValue }}</label>
      </div>
    `
  });
  /* v-model="message" 有时候为什么v-model后面要跟:title，这是什么用法？*/ 
  /*在这个例子里，是不是父组件是myinput，那子组件是哪个？
  把父组件message的值传给子组件吗？
  还是说myinput是子组件？到底哪个是子组件？父组件没有名字吗？
  这无所谓子组件不子组件吧
  只是在组件中使用model命令，并不是在子组件中使用model命令
  
  先新建一个app
  在把message的数据列出来
  在建立一个组件
  再弄样式
  无所谓父子组件，为什么props出现，它不是父组件给子组件传数据的吗？
  要传组件的双向绑定的值
  模板是传入双向绑定的值，双向绑定样式，更新这个值，
  组件内部的input元素就必须将value的属性绑定到modelValue的prop上，只要组件，传值的时候都有prop属性吗？然后
  在input时间发生时，在这里是什么事件？使用新的输入值，触发update:modelValue事件，这也是事件啊？就是更新值，更新双向绑定的值
  */
app.mount('#app')
    </script>

用组件做了有什么优势，可以封装，到时候只调用一下吗，
如果不用组件，就没有办法复用吗？