vue3组件使用方式

//Vue3 中，this无法直接拿到props属性，emit events（触发事件）和组件内的其他属性。不过全新的setup()方法可以接收两个参数：
//props - 不可变的组件参数
//context - Vue3 暴露出来的属性（emit，slots，attrs）

//this.$emait('a',参数)该成setup (props, { emit }) {
//	 const login = () => {
//	      emit('login', {
//	        username: state.username,
//	        password: state.password
//	      })
//	    }
//	}
<template>
  <div>
    <span>count is {{ count }}</span>
    <span>plusOne is {{ plusOne }}</span>
    <button @click="increment">count++</button>
  </div>
</template>

<script>
import { value, computed, watch, onMounted } from 'vue'

export default {
import { reactive,value,computed,watch,onMounted } from 'vue'
  setup(props,{emit}) {
    // reactive state
    const count = value(0)
    const state = reactive({
      username: '',
      password: ''
    })
    // computed 计算属性
    const plusOne = computed(() => count.value + 1)
    // method  方法  
    const increment = () => { count.value++ }
    // watch  监听
    watch(() => count.value * 2, val => {
      console.log(`count * 2 is ${val}`)
    })
    // 生命周期
    onMounted(() => {
      console.log(`mounted`)
    })
    // expose bindings on render context
    return {
      state,
      count,
      plusOne,
      increment
    }
  }
}
</script>