<template>
  <div style="background: #ccc; height: 50px;">
    <h2>input包装组件</h2>
    <!-- 
      :value 动态数据v-bind
      @input 给原生DOM绑定原生DOM事件
    -->
    <input type="text" :value="value" @input="$emit('input',$event.target.value)">
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'CustomInput',
    props:['value']
  }
</script>

<template>
  <div>
    <!-- 深入学习v-model:实现父子组件数据同步(实现父子组件通信) -->
    <hr />
    <!-- 
      组件身上的:value是props,父子组件通信
      这里的@input是 非原生DOM的input事件 ,属于自定义事件
    -->
    <CustomInput :value="msg" @input="msg = $event" />
    <!--上面那种写法可以简化为下面这种写法,可以实现父子组件数据同步,
    v-model不仅可以在表单元素身上使用,还可以在非表单元素身上使用,
    后台管理系统中经常在非表单元素身上,或者已经封装好的身上v-model-->
    <CustomInput v-model="msg" />
    <span>{{ msg }}</span>
  </div>
</template>

<script type="text/ecmascript-6">
import CustomInput from './CustomInput.vue'
export default {
  name: 'ModelTest',
  components: {
    CustomInput
  },
  data() {
    return {
      msg: '我爱你中国'
    }
  },

}
</script>

<template>
  <div>
    小明的爸爸现在有{{money}}元
    <h2>不使用sync修改符</h2>
    <!-- 
      :money 父组件给子组件传递props
      @update:money给子组件绑定的自定义事件,只不过名字叫做update:money
      目前这种操作,其实和v-model很相似,可以实现父子组件数据同步
      money=$event 给monet重新赋值,为子组件传回来的数据
    -->
    <Child :money="money" @update:money="money = $event" />
    <h2>使用sync修改符</h2>
    <hr>
  </div>
</template>
 
<script type="text/ecmascript-6">
  import Child from './Child.vue'
  export default {
    name: 'SyncTest',
    data() {
      return {
        money: 10000
      }
    },
    components: {
      Child,
    },
  }
</script>

<template>
  <div style="background: #ccc; height: 50px;">
    <span>小明每次花100元</span>
    <!-- $emit触发自定义事件,第一个参数是触发自定义事件的名字,
    第二个参数是子组件需要把父亲还剩多少钱告诉父亲 -->
    <button @click="$emit('update:money',money-100)">花钱</button>
    爸爸还剩{{money}}元
  </div>
</template>
 
<script type="text/ecmascript-6">
  export default {
    name: 'Child',
    props:['money']
  }
</script>

<template>
  <div>
    小明的爸爸现在有{{money}}元
    <h2>使用sync修改符</h2>
    <!-- 
      :money.sync的作用:
      第一,父组件给子组件传递props money
      第二,给当前子组件绑定了自定义事件,而且事件名称即为update:money
    -->
    <Child :money.sync="money" />
    <hr>
  </div>
</template>

<script type="text/ecmascript-6">
  import Child from './Child.vue'
  export default {
    name: 'SyncTest',
    data() {
      return {
        money: 10000
      }
    },
    components: {
      Child,
    },
  }
</script>

<template>
  <div>
    <h2>自定义带Hover提示的按钮</h2>
    <!-- 当用户再使用我们封装的按钮的时候,需要向HintButton组件传递相应的参数 (我们这里做的就是el-button二次封装) -->
    <HintButton type="success" icon="el-icon-delete" size="mini" title="提示按钮" 
    @click="handler"></HintButton>
  </div>
</template>

<script >
import HintButton from './HintButton/index.vue';
  export default {
    name: "AttrsListenersTest",
    methods: {
      //点击事件的回调
      handler() {
        alert(666)
      }
    },
    components: { HintButton }
}
</script>

<template>
  <div>
    <!-- 可以巧妙利用a标签实现按钮带有提示功能 -->
    <a :title="title">
      <!-- 
        这是复杂的写法,也可以实现效果,但是当属性过多的时候就很麻烦了
        <el-button :type="$attrs.type" :icon="$attrs.icon" :size="$attrs.size"></el-button>
      -->
      <!-- 下面这种写法v-bind不能用 : 不然没效果,这是简单的写法实现效果 -->
      <!-- v-on也不能用 @ 不然没效果-->
      <el-button v-bind="$attrs" v-on="$listeners"></el-button>
    </a>
  </div>
</template>

<script>
  export default {
    props:['title'],
    mounted () {
      //$attrs属于组件实例自身的一个属性,可以获取到父组件传递过来的props数据
      //对于子组件而言,父组件给的数据可以利用props接收,
      //注意,如果子组件通过props接收的属性,在$attrs属性当中是获取不到的
      console.log(this.$attrs);
      //$listeners,它也是组件实例自身的一个属性,它可以获取到父组件给子组件传递的自定义事件
      console.log(this.$listeners);
    },
  }
</script>
<style lang="scss" scoped>
</style>