必不可少的UI组件一——组件的基础知识

import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 更改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`计数器初始值为 ${count.value}。`)
})



  点击了：{{ count }} 次



.btn {
  background-color: #c7000b;
}

npm create vite@latest

import { ref, watch } from 'vue'

const a = ref('Hello');

// 响应式变量 a 发生修改，关联事件(alert) 会被触发
watch(a, () => {
  alert(a.value)
})


// 5 秒后，修改响应式变量 a
setTimeout(() => {
  a.value = 'Hello World!'
}, 5000)



  

    
    
{{ a }}
  

import { ref, reactive } from 'vue'

const refState = ref(0);
console.log(refState) // Ref 对象
console.log(refState.value) // 0

const reactiveState = reactive({ state: 0 })
console.log(reactiveState.state) // 0

function clickHandler() {
  // ref 对象的设置也需要 .value
  refState.value++;
  reactiveState.state++;
}



  

    
    
{{ refState }}
    
{{ reactiveState.state }}
    +1
  

import { ref, reactive, computed } from 'vue'

const a = ref(1);
const b = reactive({ count: 2 })

// 函数内部无论是 a 还是 b 发生变化，都会自动触发响应式变量 sum 的重新计算，永远保持 sum = a + b.count
const sum = computed(() => a.value + b.count)

setTimeout(() => {
  a.value = 2;
  b.count = 3;
  // 注意访问 computed 创建的响应式变量时也要加上 .value
  console.log(sum.value) // 5
}, 5000)



  

    
    
a = {{ a }}
    
b.count = {{ b.count }}
    
sum = a + b.count = {{ sum }}
  

import { ref, reactive, watch } from 'vue'

const count = ref(0)
const data = reactive({
  count: 0
})

watch(count, (newVal, oldVal) => {
  // count changed from 0 to 1
  console.log(`count changed from ${oldVal} to ${newVal}`)
})

watch(data, (newVal, oldVal) => {
  // { count: 2 }
  console.log(oldVal)

  // { count: 2 }
  console.log(newVal)
})

// 检测 reactive 对象内部属性时，需要写成函数返回的形式
watch(() => data.count, (newVal, oldVal) => {
  // data.count changed from 0 to 2
  console.log(`data.count changed from ${oldVal} to ${newVal}`)
})

// 观测多个 响应式对象/属性 的变化
watch([
  count,
  () => data.count
], ([newCount, newDataCount], [oldCount, oldDataCount]) => {
  // count changed from 0 to 1
  // data.count changed from 0 to 2
  console.log(`count changed from ${oldCount} to ${newCount}`)
  console.log(`data.count changed from ${oldDataCount} to ${newDataCount}`)
})

setTimeout(() => {
  count.value = 1
  data.count = 2
}, 5000)

import { ref, onMounted, onBeforeUnmount } from 'vue'

const el = ref()
console.log(el.value) // undefined
onMounted(() => {
  // 通常在 onMounted 中获取 DOM
  console.log(el.value) // HTMLDivElement
})

const timer = setTimeout(function() {
  // 定时器任务
}, 5000)
onBeforeUnmount(() => {
  // 在 onBeforeUnmount 中注销定时器、绑定事件等
  clearTimeout(timer)
})




  

import { ref, onMounted, onBeforeUnmount } from 'vue'

const a = ref()
onMounted(() => {
  console.log(a.value) // HTMLDivElement
  console.log(a.value.innerText) // aaa
})

const b = ref()
onMounted(() => {
  console.log(b.value) // HTMLDivElement
  console.log(b.value.innerText) // bbb
})

const c = ref()
onMounted(() => {
  console.log(c.value) // HTMLDivElement
  console.log(c.value.innerText) // ccc
})




  

    
aaa
    
bbb
    
ccc
  

import { reactive } from 'vue'

const props = withDefaults(defineProps<{
  // props 的类型
  text?: string;
  data?: Record;
  clickCallback?: (data: Record) => void
}>(), {
  // props 的默认值
  text: 'Button',
  data: () => ({}),
  clickCallback: () => {}
})

const childData = reactive({
  ...props.data,
  count: 0,
})

function clickHandler() {
  childData.count++
  props.clickCallback(childData)
}



  
    {{ text }}
  

import Child from './child.vue'

function clickHandler(data: Record) {
  console.log('子组件的数据对象：', data); // 子组件的数据对象：{ message: 'parent', count: 1 }
}



  

import { reactive } from 'vue'

const emit = defineEmits();

const list: string[] = reactive([])

function clickHandler() {
  const value = `第${String(list.length + 1)}项`
  list.push(value)
  emit('add', value, list);
}



  

    

      
{{ item }}
    
    Add
  

import Child from './child.vue'

function addHandler(value: string, list: string[]) {
  console.log('向子组件列表添加项：', value)
  console.log('子组件当前列表：', list)
}



  

import { ref, watch } from 'vue'

const props = withDefaults(defineProps(), {
  value: ''
})

const emit = defineEmits();

const valueModel = ref(props.value);

watch(() => props.value, (val) => {
  valueModel.value = val
})

watch(valueModel, (val) => {
  emit('update:value', val)
})

function inputHandler(event: Event) {
  const { value } = event.target as HTMLInputElement
  valueModel.value = value
}

function clickHandler() {
  valueModel.value += 'Hello World!'
}



  

    
    子组件内部修改 value
  

import Child from './child.vue'
import { ref, watch } from 'vue'

const msg = ref('')



  

    
    
{{ msg }}
  

import { ref } from 'vue'

const isVisible = ref(false);

function open() {
  isVisible.value = true;
}

function close() {
  isVisible.value = false;
}

defineExpose({
  isVisible,
  open,
  close
})



  
Child

import Child from './child.vue'
import { ref, computed } from 'vue'

const childInstance = ref<InstanceType>()

const showState = computed(() => `${childInstance.value?.isVisible ? '显示' : '隐藏'}`)

function showHandler() {
  childInstance.value?.open()
  console.log('当前组件的状态：', showState.value)
}

function hideHandler() {
  childInstance.value?.close();
  console.log('当前组件的状态：', showState.value)
}




  

    显示 Child
    隐藏 Child
    
当前组件的状态：{{ showState }}
    
  

import { ref, watch, provide, Ref } from 'vue'

const props = withDefaults(defineProps(), {
  modelValue: ''
})

const emit = defineEmits();

// 实现选中项 v-model 双向绑定
const model = ref(props.modelValue)
watch(() => props.modelValue, (val) => { model.value = val })
watch(model, (val) => { emit('update:modelValue', val) })

// 将组件的上下文对象向下传递
const context = {
  radioGroupSelected: model,
  selections: <Ref[]>[]
};

export type RadioGroupContext = typeof context

provide('radio-group', context)



  

    
  

import { ref, watch, inject, Ref } from 'vue'
import type { RadioGroupContext } from './radio-group.vue'

const props = withDefaults(defineProps(), {
  modelValue: false,
  value: ''
})

const emit = defineEmits();

// 获取 radio-group 组件的上下文对象
const radioGroupContext = inject('radio-group')

// 实现选中状态 v-model 双向绑定
const model = ref(props.modelValue)
watch(() => props.modelValue, (val) => { model.value = val })
watch(model, (val) => { emit('update:modelValue', val) })

if (radioGroupContext) {
  // 若检测到父级 radio-group 组件，将自身状态推入上下文对象
  radioGroupContext.selections.push(model);
}

function changeHandler(event: Event) {
  const { checked } = event.target as HTMLInputElement
  model.value = checked

  if (checked && radioGroupContext) {
    // 子组件被选中时，根据子组件绑定的 value，控制父组件的 v-model 绑定值
    radioGroupContext.radioGroupSelected.value = props.value

    // 取消其他同级 radio 的选中状态
    radioGroupContext.selections.forEach((selection) => {
      if (selection !== model) {
        selection.value = false
      }
    })
  }
}



  

    
    
  

import { ref } from 'vue'
import RadioGroup from './radio-group.vue'
import Radio  from './radio.vue'

const value = ref('')



  

    
      选项 1
      选项 2
      选项 3
    
    
当前选中的值：{{ value }}
  

import { reactive } from 'vue'

const data = reactive({
  default: 0,
  special: 0
})



  

    
defaultCount：{{ data.default }}
    
    
specialCount：{{ data.special }}
    
  

import Child from './child.vue'



  
    
      Click
    
      
      Click
    
  

comp
 ┣ comp.vue
 ┣ composables.ts
 ┣ index.ts
 ┗ props.ts

// index.ts
import Comp from './comp.vue';

export { Comp }
export * from './composables';
export * from './props';

// props.ts
import { InferVueDefaults } from '@/utils';
import type Input from './Input.vue';

export interface InputProps {
  /** 原生 input 类型 */
  type?: string;

  /** 绑定值 */
  modelValue?: string;

  /** 输入框占位文本 */
  placeholder?: string;

  /** 是否显示清楚按钮 */
  clearable?: boolean;
}

export type RequiredInputProps = Required

export function defaultInputProps(): Required> {
  return {
    type: 'text',
    modelValue: '',
    placeholder: '',
    clearable: false
  };
}

export interface InputEmits {
  (event: 'update:modelValue', val: string): void;
  (event: 'input', val: string): void;
  (event: 'clear'): void;
  (event: 'focus'): void;
  (event: 'blur'): void;
}

export type InputInstance = InstanceType

type NativeType = null | number | string | boolean | symbol | Function;
type InferDefault
 = ((props: P) => T & {}) | (T extends NativeType ? T : never);

/** 推断出 props 默认值的类型 */
export type InferVueDefaults = {
  [K in keyof T]?: InferDefault;
};

import { 
  defaultInputProps, 
  InputProps,
  InputEmits
} from './props';

// 声明自定义选项，如组件名称 name
defineOptions({
  // ...
})

// 定义属性 props
const props = withDefaults(
  defineProps(),
  defaultInputProps(),
);

// 定义事件 emits
const emit = defineEmits();

// 组件实现逻辑


// 向外暴露属性与方法
defineExpose({
  // ...
})



  

import { InputInstance } from './input'
import { ref } from 'vue'

const input = ref()




  

import { 
  defaultInputProps, 
  InputProps,
  InputEmits
} from './input';

interface MyInputProps extends InputProps {
  // ...
}

const props = withDefaults(
  defineProps(),
  {
    ...defaultInputProps(),
    // 更多属性的默认值
  },
);

interface MyInputEmits extends InputEmits {
  // ...
}

const emit = defineEmits();

import { useFeatureA } from './featureA.js'
import { useFeatureB } from './featureB.js'
import { useFeatureC } from './featureC.js'

const { foo, bar } = useFeatureA()
const { baz } = useFeatureB(foo)
const { qux } = useFeatureC(baz)

// composables.ts
import { 
  ref, 
  watch, 
  onMounted, 
  onBeforeUnmount 
} from 'vue';
import {
  RequiredInputProps,
  InputEmits
} from './props'

export function useInputModelValue(
  props: RequiredInputProps,
  emit: InputEmits
) {
  const model = ref(props.modelValue);

  watch(() => props.modelValue, (val) => {
    model.value = val
  })

  watch(model, (val) => {
    emit('update:modelValue', val)
  })

  return { model }
}

export function useInputEvents(
  emit: InputEmits,
  modelValueContext: ReturnType
) {
  const inputEl = ref()
  const { model } = modelValueContext

  function focus() {
    inputEl.value?.focus()
  }

  function blur() {
    inputEl.value?.blur()
  }

  function focusHandler () {
    emit('focus')
  }

  function blurHandler () {
    emit('blur')
  }

  function inputHandler(e: Event) {
    const { value } = e.target as HTMLInputElement
    model.value = value
    emit('input', value)
  }

  // 组件挂载后获取 dom
  onMounted(() => {
    inputEl.value?.addEventListener('focus', focusHandler)
    inputEl.value?.addEventListener('blur', blurHandler)
    inputEl.value?.addEventListener('input', inputHandler)
  })

  // 组件注销前及时解绑事件
  onBeforeUnmount(() => {
    inputEl.value?.removeEventListener('focus', focusHandler)
    inputEl.value?.removeEventListener('blur', blurHandler)
    inputEl.value服务器托管网?.removeEventListener('input', inputHandler)
  })

  return { 
    inputEl,
    focus,
    blur
  }
}

export function useInputClearable(
  emit: InputEmits,
  modelValueContext: ReturnType
) {
  const { model } = modelValueContext

  function clearHandler() {
    model.value = ''
    emit('clear')
  }

  return { clearHandler }
}

import { 
  defaultInputProps, 
  InputProps,
  InputEmits
} from './props';
import {
  useInputModelValue,
  useInputClearable,
  useInputEvents
} from './composables'

defineOptions({
  // 自定义选项
})

const props = withDefaults(
  defineProps(),
  defaultInputProps(),
)

const emit = defineEmits()

// 组件实现逻辑
const modelValueContext = useInputModelValue(props, emit)
const { model } = modelValueContext

const { inputEl, focus, blur } = useInputEvents(emit, modelValueContext)

const { clearHandler } = useInputClearable(emit, modelValueContext)

defineExpose({
  clear: clearHandler,
  focus,
  blur,
})



  

    
    清除