vite+vue简单使用

【一】setup()函数

【1】ref、reactive、计算属性

<script setup>
import {computed, reactive, ref} from "vue";
let name = ref('hope')
let person=reactive({
  name:'Tom',
  age:19
})
const newName1 = computed(() => {
  return name.value + '_NB'
})
const newName2 = computed(() => {
  return person.name + '_NB'
})
const changeName1 = () => {
  name.value='彭于晏'
}
const changeName2 = () => {
  person.name='彭于晏'
  person.age+=2
}
</script>

<template>
  <div class="About">
    <h1>{{name}}</h1>
    <h1>{{newName1}}--{{newName2}}--{{person.age}}</h1>
    <button @click="changeName1">点我变姓名1</button>
    <button @click="changeName2">点我变姓名和年龄</button>
<!--    <h1>姓名: {{person.name}}</h1>-->
  </div>

</template>

【2】组件间通信

【1】父传子

• 父组件的 message 数据属性的值将会被传递给子组件 children1 中名为 msg 的属性

<script setup>

import Children1 from "../components/children1.vue";
import {ref} from "vue";

const message=ref('你好！')
</script>
<template>
  
<children1 :msg="message"></children1>
</template>

• children.vue

<script setup>
//
//defineProps(['msg'])
defineProps({
  msg: String,
})
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

【2】子传父

• 在子组件中触发事件：在Vue 3中，使用 this.$emit 方法触发自定义事件，通常在方法或事件处理器中进行。
• 在父组件中监听事件：父组件通过在模板中使用 v-on 或 @ 语法监听子组件上的自定义事件。

• parent.vue

<script setup>

import Children1 from "../components/children1.vue";
import {ref} from "vue";

// 子传父
const child_name = ref('')
//自定义事件
function handleEvent(name) {
  child_name.value = name
}
</script>
<template>
<h1>{{child_name}}</h1>
<children1 @myevent="handleEvent"></children1>
</template>

• children.vue

<script setup>
//
//defineProps(['msg'])
import {ref} from "vue";
//声明了一个名为 myevent 的自定义事件。这意味着组件内部可以通过返回的 $emit 函数触发这个事件
let $emit = defineEmits(['myevent']) // 等同于之前的  this.$emit
const name=ref('')
function handleSend(){
  $emit('myevent',name.value)
}
</script>

<template>
  <input v-model="name" type="text">
  <button @click="handleSend">点我，传到父</button>
</template>

【3】ref属性

• parent.vue

<script setup>

import Children1 from "../components/children1.vue";
import {ref} from "vue";

// 代指  this.$refs.child3  ,这个地方必须叫child3，放在组件上的ref是child3
// created--->还没挂载---》组件还没有
const children2=ref()
function showLog() {
  console.log(children2.value.age)
  children2.value.changeAge()
  console.log(children2.value.age)
}
</script>

<template>

<children1 ref="children2">
</children1>
  <button @click="showLog">点我看控制台</button>
</template>

• children.vue

<script setup>
import {ref} from 'vue'

const age = ref(19)
const changeAge = () => {
  age.value += 10
}
//defineExpose 是用来决定哪些内部变量或方法应该暴露给使用该组件的父组件或其他外部环境
defineExpose({age, changeAge})
</script>

<template>
  <h1>ref属性使用</h1>
</template>