<!-- 父组件 -->
<template>
  <div>
    <h1>Props Down Parent</h1>
    <child title="My journey with Vue"></child>
  </div>
</template>

<script>
import child from './01-Child'
export default {
  components: { child }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h1>Props Down Child</h1>
    <h2>{{ title }}</h2>
  </div>
</template>

<script>
export default {
  // 简写：props: ['title']
  // 推荐带类型声明，便于校验与文档化
  props: {
    title: String
  }
}
</script>

<template>
  <div>
    <h1 :style="{ fontSize: fontSize + 'em' }">Event Up Child</h1>
    <button @click="handler">文字增大</button>
  </div>
</template>

<script>
export default {
  props: {
    fontSize: Number
  },
  methods: {
    handler () {
      this.$emit('enlargeText', 0.1)
    }
  }
}
</script>

<template>
  <div>
    <h1 :style="{ fontSize: hFontSize + 'em'}">Event Up Parent</h1>

    这里的文字不需要变化

    <child :fontSize="hFontSize" v-on:enlargeText="enlargeText"></child>
    <child :fontSize="hFontSize" v-on:enlargeText="enlargeText"></child>
    <child :fontSize="hFontSize" v-on:enlargeText="hFontSize += $event"></child>
  </div>
</template>

<script>
import child from './02-Child'
export default {
  components: { child },
  data () {
    return { hFontSize: 1 }
  },
  methods: {
    enlargeText (size) {
      this.hFontSize += size
    }
  }
}
</script>

// eventbus.js
import Vue from 'vue'
export default new Vue()

<template>
  <div>
    <h1>Event Bus Sibling02</h1>
    <div>{{ msg }}</div>
  </div>
</template>

<script>
import bus from './eventbus'
export default {
  data () {
    return { msg: '' }
  },
  created () {
    bus.$on('numchange', (value) => {
      this.msg = `您选择了${value}件商品`
    })
  }
}
</script>

<template>
  <div>
    <h1>Event Bus Sibling01</h1>
    <div class="number" @click="sub">-</div>
    <input type="text" style="width: 30px; text-align: center" :value="value">
    <div class="number" @click="add">+</div>
  </div>
</template>

<script>
import bus from './eventbus'

export default {
  props: {
    num: Number
  },
  created () {
    this.value = this.num
  },
  data () {
    return { value: -1 }
  },
  methods: {
    sub () {
      if (this.value > 1) {
        this.value--
        bus.$emit('numchange', this.value)
      }
    },
    add () {
      this.value++
      bus.$emit('numchange', this.value)
    }
  }
}
</script>

<style>
.number {
  display: inline-block;
  cursor: pointer;
  width: 20px;
  text-align: center;
}
</style>

<template>
  <div>
    <h1>ref Child</h1>
    <input ref="input" type="text" v-model="value">
  </div>
</template>

<script>
export default {
  data () {
    return { value: '' }
  },
  methods: {
    focus () {
      this.$refs.input.focus()
    }
  }
}
</script>

<template>
  <div>
    <h1>ref Parent</h1>
    <child ref="c"></child>
  </div>
</template>

<script>
import child from './04-Child'
export default {
  components: { child },
  mounted () {
    this.$refs.c.focus()
    this.$refs.c.value = 'hello input'
  }
}
</script>

// 子组件中触发事件
this.$emit('myEvent')

<!-- 父组件中监听 - 没有效果！ -->
<my-component v-on:my-event="doSomething"></my-component>

// ✅ 推荐
this.$emit('my-event')

// ❌ 不推荐
this.$emit('myEvent')
this.$emit('MyEvent')

<!-- ✅ 推荐 -->
<my-component @my-event="doSomething"></my-component>

// 默认 v-model 实现
Vue.component('base-input', {
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `
})

<!-- 使用方式 -->
<base-input v-model="searchText"></base-input>

<!-- 等价于 -->
<base-input :value="searchText" @input="searchText = $event"></base-input>

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',   // 指定 prop 名称
    event: 'change'    // 指定事件名称
  },
  props: {
    checked: Boolean   // 必须在 props 中声明
  },
  template: `
    <input
      type="checkbox"
      :checked="checked"
      @change="$emit('change', $event.target.checked)"
    >
  `
})

<!-- 使用方式 -->
<base-checkbox v-model="lovingVue"></base-checkbox>

<!-- 等价于 -->
<base-checkbox :checked="lovingVue" @change="lovingVue = $event"></base-checkbox>

Vue.component('counter', {
  model: {
    prop: 'count',
    event: 'increment'
  },
  props: {
    count: {
      type: Number,
      default: 0
    },
    step: {
      type: Number,
      default: 1
    }
  },
  template: `
    <div class="counter">
      <button @click="decrement">-</button>
      <span>{{ count }}</span>
      <button @click="increment">+</button>
    </div>
  `,
  methods: {
    increment() {
      this.$emit('increment', this.count + this.step)
    },
    decrement() {
      this.$emit('increment', this.count - this.step)
    }
  }
})

<counter v-model="total" :step="5"></counter>

<base-input @focus.native="onFocus" @click.native="onClick"></base-input>

<!-- 原来的模板 -->
<input class="base-input">

<!-- 重构后的模板 -->
<label>
  {{ label }}
  <input class="base-input">
</label>

{
  focus: function (event) { /* ... */ },
  input: function (value) { /* ... */ }
}

Vue.component('base-input', {
  inheritAttrs: false,  // 避免根元素继承属性
  props: ['label', 'value'],
  computed: {
    inputListeners() {
      return Object.assign(
        {},
        // 所有父级监听器
        this.$listeners,
        // 添加或覆写特定监听器
        {
          input: (event) => {
            this.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        :value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

<base-input
  v-model="email"
  label="邮箱："
  placeholder="请输入邮箱"
  @focus="onFocus"
  @blur="onBlur"
></base-input>

// ❌ 问题：子组件直接修改父组件数据，难以追踪
props: ['value'],
methods: {
  updateValue() {
    this.value = 'new value'  // Vue 会警告！
  }
}

// 子组件
this.$emit('update:title', newTitle)

<!-- 父组件 -->
<text-document
  :title="doc.title"
  @update:title="doc.title = $event"
></text-document>

<!-- 完整写法 -->
<text-document
  :title="doc.title"
  @update:title="doc.title = $event"
></text-document>

<!-- 缩写形式 -->
<text-document :title.sync="doc.title"></text-document>

<text-document v-bind.sync="doc"></text-document>

// doc 对象
doc: {
  title: '文档标题',
  content: '文档内容',
  author: '作者名'
}

// 等价于
<text-document
  :title="doc.title"
  @update:title="val => doc.title = val"
  :content="doc.content"
  @update:content="val => doc.content = val"
  :author="doc.author"
  @update:author="val => doc.author = val"
></text-document>

<!-- ❌ 无效 -->
<text-document :title.sync="doc.title + '!'"></text-document>

<!-- ✅ 有效 -->
<text-document :title.sync="doc.title"></text-document>

<!-- ❌ 无效 -->
<text-document v-bind.sync="{ title: doc.title }"></text-document>

Vue.component('modal-dialog', {
  props: {
    visible: Boolean,
    title: String
  },
  template: `
    <div class="modal" v-if="visible">
      <div class="modal-header">
        <h3>{{ title }}</h3>
        <button @click="close">&times;</button>
      </div>
      <div class="modal-body">
        <slot></slot>
      </div>
    </div>
  `,
  methods: {
    close() {
      this.$emit('update:visible', false)
    }
  }
})

<modal-dialog :visible.sync="showDialog" title="提示">
  确定要删除吗？
</modal-dialog>

<!-- app.vue -->
<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    provide () {
      return {
        app: this
      }
    },
    data () {
      return {
        userInfo: null
      }
    },
    methods: {
      getUserInfo () {
        // 通过 ajax 获取用户信息后，赋值给 this.userInfo
      }
    },
    mounted () {
      this.getUserInfo();
    }
  }
</script>

<template>
  <div>{{ app.userInfo }}</div>
</template>
<script>
  export default {
    inject: ['app'],
    methods: {
      changeUserInfo () {
        // 直接调用 app.vue 的方法
        this.app.getUserInfo();
      }
    }
  }
</script>

export default {
  inject: ['form']
}

computed: {
  form () {
    let parent = this.$parent;
    while (parent.$options.name !== 'Form') {
      parent = parent.$parent;
    }
    return parent;
  }
}

// mixins/emitter.js
function broadcast(componentName, eventName, params) {
  this.$children.forEach(child => {
    const name = child.$options.name;

    if (name === componentName) {
      child.$emit.apply(child, [eventName].concat(params));
    } else {
      broadcast.apply(child, [componentName, eventName].concat([params]));
    }
  });
}

export default {
  methods: {
    dispatch(componentName, eventName, params) {
      let parent = this.$parent || this.$root;
      let name = parent.$options.name;

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;
        if (parent) {
          name = parent.$options.name;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
    broadcast(componentName, eventName, params) {
      broadcast.call(this, componentName, eventName, params);
    }
  }
};

<!-- 父组件 A.vue：向下广播 -->
<template>
  <button @click="handleClick">触发事件</button>
</template>
<script>
  import Emitter from '../mixins/emitter.js';

  export default {
    name: 'componentA',
    mixins: [ Emitter ],
    methods: {
      handleClick () {
        // 向下找到名为 componentB 的组件，触发 on-message 事件
        this.broadcast('componentB', 'on-message', 'Hello Vue.js');
      }
    }
  }
</script>

// 子组件 B.vue：监听事件
export default {
  name: 'componentB',
  created () {
    this.$on('on-message', this.showMessage);
  },
  methods: {
    showMessage (text) {
      console.log(text);  // Hello Vue.js
    }
  }
}

// utils/assist.js

// 由一个组件，向上找到最近的指定组件
function findComponentUpward (context, componentName) {
  let parent = context.$parent;
  let name = parent.$options.name;

  while (parent && (!name || [componentName].indexOf(name) < 0)) {
    parent = parent.$parent;
    if (parent) name = parent.$options.name;
  }
  return parent;
}

// 由一个组件，向上找到所有的指定组件
function findComponentsUpward (context, componentName) {
  let parents = [];
  const parent = context.$parent;

  if (parent) {
    if (parent.$options.name === componentName) parents.push(parent);
    return parents.concat(findComponentsUpward(parent, componentName));
  } else {
    return [];
  }
}

// 由一个组件，向下找到最近的指定组件
function findComponentDownward (context, componentName) {
  const childrens = context.$children;
  let children = null;

  if (childrens.length) {
    for (const child of childrens) {
      const name = child.$options.name;

      if (name === componentName) {
        children = child;
        break;
      } else {
        children = findComponentDownward(child, componentName);
        if (children) break;
      }
    }
  }
  return children;
}

// 由一个组件，向下找到所有指定的组件
function findComponentsDownward (context, componentName) {
  return context.$children.reduce((components, child) => {
    if (child.$options.name === componentName) components.push(child);
    const foundChilds = findComponentsDownward(child, componentName);
    return components.concat(foundChilds);
  }, []);
}

// 由一个组件，找到指定组件的兄弟组件
function findBrothersComponents (context, componentName, exceptMe = true) {
  let res = context.$parent.$children.filter(item => {
    return item.$options.name === componentName;
  });
  let index = res.findIndex(item => item._uid === context._uid);
  if (exceptMe) res.splice(index, 1);
  return res;
}

export {
  findComponentUpward,
  findComponentsUpward,
  findComponentDownward,
  findComponentsDownward,
  findBrothersComponents
};

<!-- 在组件 B 中向上找到组件 A 的实例 -->
<script>
  import { findComponentUpward } from '../utils/assist.js';

  export default {
    name: 'componentB',
    mounted () {
      const comA = findComponentUpward(this, 'componentA');
      if (comA) {
        console.log(comA.name);     // 访问 A 的数据
        comA.sayHello();            // 调用 A 的方法
      }
    }
  }
</script>

// 无参数
this.$emit('close')

// 单个参数
this.$emit('update:value', newValue)

// 多个参数
this.$emit('submit', { name: 'John' }, true)

// 传递事件对象
this.$emit('click', $event)

// 监听当前实例上的自定义事件
vm.$on(event, callback)
vm.$on(event, callback)

// 监听一个自定义事件，但是只触发一次
vm.$once(event, callback)

// 移除自定义事件监听器
vm.$off([event, callback])

// 监听事件
this.$on('my-event', (data) => {
  console.log('收到数据:', data)
})

// 监听多个事件
this.$on(['event1', 'event2'], handler)

// 监听一次（触发后自动移除）
this.$once('my-event', (data) => {
  console.log('只触发一次:', data)
})

// 移除监听
this.$off('my-event', handler)  // 移除特定监听器
this.$off('my-event')           // 移除该事件的所有监听器
this.$off()                     // 移除所有事件监听器

export default {
  created() {
    this.$on('custom-event', this.handleEvent)
  },
  beforeDestroy() {
    this.$off('custom-event', this.handleEvent)  // 清理监听器
  },
  methods: {
    handleEvent(data) {
      // 处理事件
    }
  }
}

// 父组件
<base-input
  @focus="onFocus"
  @input="onInput"
  @custom-event="onCustomEvent"
/>

// 子组件中 $listeners 的值
{
  focus: function (event) { /* ... */ },
  input: function (value) { /* ... */ },
  'custom-event': function (data) { /* ... */ }
}

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['value'],
  computed: {
    // 合并监听器
    inputListeners() {
      return Object.assign(
        {},
        this.$listeners,  // 所有父级监听器
        {
          // 覆盖特定监听器
          input: (event) => {
            this.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <input
      v-bind="$attrs"
      :value="value"
      v-on="inputListeners"
    >
  `
})

// ✅ 推荐：kebab-case，动词开头
this.$emit('update:user')
this.$emit('remove-item')
this.$emit('change-status')
this.$emit('input')

// ❌ 不推荐
this.$emit('updateUser')    // camelCase
this.$emit('itemRemoved')   // camelCase
this.$emit('MyEvent')       // PascalCase

// 用户列表组件
Vue.component('user-list', {
  props: {
    users: Array
  },
  methods: {
    handleRemove(userId) {
      // ✅ 清晰的命名
      this.$emit('remove-user', userId)
    },
    handleEdit(user) {
      // ✅ 传递完整对象
      this.$emit('edit-user', user)
    },
    handleSelect(userIds) {
      // ✅ 批量操作
      this.$emit('select', userIds)
    }
  }
})

// ✅ 推荐：kebab-case，动词开头
this.$emit('update:user')
this.$emit('remove-item')
this.$emit('change-status')

// ❌ 不推荐
this.$emit('updateUser')
this.$emit('itemRemoved')

// ✅ 推荐：传递有意义的数据对象
this.$emit('update:user', { id: 1, name: 'John' })
this.$emit('remove', itemId)

// ✅ 推荐：传递必要的信息
this.$emit('change', { oldValue, newValue })

// ❌ 不推荐：传递过多参数（难以理解）
this.$emit('update', user, index, oldData, newData)

// ✅ 改进：使用对象封装
this.$emit('update', { user, index, oldData, newData })

<!-- 传递原生事件对象 -->
<button @click="handleClick($event)">点击</button>

<!-- 同时传递参数和事件对象 -->
<button @click="handleClick(item, $event)">点击</button>

methods: {
  handleClick(item, event) {
    // 可以访问原生事件对象
    event.preventDefault()
    this.$emit('click', { item, event })
  }
}

/**
 * 用户选择组件
 * 
 * @event select - 用户选择某项时触发
 * @event change - 选择项变化时触发
 * @event clear - 清空选择时触发
 * @event {Object} update:user - 用户信息更新时触发
 */
Vue.component('user-select', {
  props: {
    users: Array
  },
  methods: {
    handleSelect(user) {
      /**
       * 选择事件
       * @property {Object} user - 被选中的用户对象
       * @property {number} user.id - 用户 ID
       * @property {string} user.name - 用户名称
       */
      this.$emit('select', user)
    }
  }
})

/**
 * 可搜索的选择器组件
 * 
 * @component
 * @example
 * <search-select
 *   :options="userList"
 *   v-model="selectedUser"
 *   @change="handleChange"
 *   @search="handleSearch"
 * />
 */
Vue.component('search-select', {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    /**
     * 选项列表
     * @type {Array<{label: string, value: any}>}
     */
    options: {
      type: Array,
      required: true
    },
    /**
     * 当前选中值
     */
    value: [String, Number, Object],
    /**
     * 是否禁用
     */
    disabled: Boolean
  },
  methods: {
    /**
     * 触发搜索事件
     * @param {string} query - 搜索关键词
     * @fires search
     */
    handleSearch(query) {
      this.$emit('search', query)
    }
  }
})

// ✅ 标准表单组件结构
Vue.component('form-field', {
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: [String, Number],
    label: String,
    disabled: Boolean,
    placeholder: String,
    required: Boolean
  },
  computed: {
    inputListeners() {
      return {
        ...this.$listeners,
        input: (event) => {
          this.$emit('input', event.target.value)
        }
      }
    }
  },
  template: `
    <div class="form-field">
      <label v-if="label">{{ label }}</label>
      <input
        v-bind="$attrs"
        :value="value"
        :disabled="disabled"
        :placeholder="placeholder"
        v-on="inputListeners"
      >
    </div>
  `
})

// 父组件：表单容器
Vue.component('form-container', {
  data() {
    return {
      formData: {
        username: '',
        email: '',
        age: 0
      }
    }
  },
  methods: {
    handleSubmit() {
      // 触发提交事件
      this.$emit('submit', this.formData)
    },
    handleFieldChange(field, value) {
      this.$set(this.formData, field, value)
    }
  },
  template: `
    <form @submit.prevent="handleSubmit">
      <form-field
        v-model="formData.username"
        label="用户名"
        @input="handleFieldChange('username', $event)"
      />
      <form-field
        v-model="formData.email"
        label="邮箱"
        type="email"
      />
      <button type="submit">提交</button>
    </form>
  `
})

// 子组件触发事件
this.$emit('myEvent')

// 父组件监听（DOM 模板）
<MyComponent @my-event="handler" />  // ❌ 监听不到（HTML 转换为小写）
<MyComponent @myEvent="handler" />   // ❌ 监听不到（被转换为 myevent）

// 父组件监听（字符串模板/.vue 文件）
<MyComponent @myEvent="handler" />   // ✅ 可以监听

// ✅ 推荐：子组件
this.$emit('my-event')

// ✅ 推荐：父组件
<MyComponent @my-event="handler" />

<!-- v-model 示例 -->
<custom-input v-model="text"></custom-input>
<!-- 等价于 -->
<custom-input :value="text" @input="text = $event"></custom-input>

<!-- .sync 示例 -->
<dialog :visible.sync="show" :title.sync="title"></dialog>
<!-- 等价于 -->
<dialog
  :visible="show"
  @update:visible="show = $event"
  :title="title"
  @update:title="title = $event">
</dialog>

// ❌ 错误：直接修改
this.someProp = newValue  // Vue 会警告

// ✅ 正确方式 1：使用事件
this.$emit('update:someProp', newValue)

// ✅ 正确方式 2：使用计算属性
computed: {
  localValue: {
    get() { return this.someProp },
    set(val) { this.$emit('update:someProp', val) }
  }
}

<!-- 方法 1：内联处理器 -->
<button @click="$emit('click', $event)">点击</button>

<!-- 方法 2：方法处理器 -->
<button @click="handleClick">点击</button>

<!-- 方法 3：同时传递参数和事件对象 -->
<button @click="handleClick(item, $event)">点击</button>

methods: {
  handleClick(item, event) {
    this.$emit('click', { item, event })
  }
}