快速的了解 vue3的语法和用法

vue3.....的使用介绍

 1.setup的使用：

<template>
  <div>我是app  {{age}}</div>
  <button @click="sayHi">按钮</button>
</template>
<script>
// setup中不能使用this this指向是undefined
//在模板中需要使用数据和函数 需要在setup中返回
// vue3申明在使用 所有的逻辑 方法都写在setup里面
export default {
  setup(){
    const age = 14
     const sayHi = ()=>{
      console.log('ninaho')
     }
     return {age ,sayHi}
  }
}
</script>
<style scoped>

  2.## reactive 函数：

<template>
   <div>{{ user.username }}</div>
   <div>{{ user.age }}</div>
</template>
<script>
// 传入复杂数据类型 将复杂数据装换成响应式数据 （返回的对象是响应式代理）
// 默认的普通值不是响应式的 需要reactive函数
import {reactive} from 'vue'
export default {
  setup(){
    const user = reactive({
      username: 'zhangsan1',
      age: 12
    })
     return {user}
  }
}
</script>
<style scoped>
</style>

   3.##ref 函数 ：

<template>
   <div>{{ money }}</div>
   <button @click="money++">改值</button>
</template>
<script>
export default {
  setup(){
    // 此刻的money已经包裹为一个对象，它有唯一的属性 .value
    // 在setup函数中，通过ref对象的value属性 ，可以访问到值
    // 在模板中 ref会自动解套 不需要在通过.value
     const money = ref(100)
     money.value ++
     return {money}
  }
}
</script>
<style></style>

 4.## setup语法相当组合API的语法糖 ：

  使用的时候需要把setup添加到《script》中，好处就是不在需要return导出计算属性 computed


<template>
 <div>我今年的年纪<input v-model="age" type = 'text'/></div>
 <div>我明年的年纪{{ nextAge }}</div>
 <div>我今年的年纪<input  type="text" v-model="nextAge2"/></div>
</template>
<script setup >
import { ref, computed } from 'vue'
const age = ref(10)
const nextAge = computed(()=>{
  return + age.value +1
})
const nextAge2 = computed(()=>{
  return + age.value +2
})
</script>
<style scoped>
</style>

 5. ## 生命周期钩子函数：

import { onMounted, onUpdated, onUnmounted } from 'vue'
// 写在setup里面
const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  }
}

 6.##父子传值：

父组件 <template>

  <div>金钱 {{money }}</div>
  <div>卡车 {{ car }}</div>

  <son :money=" money" :car="car"></son>
</template>



<script setup >
 //实现的步骤
 // 父组件提供数据
 // 父组件将数据传递给子组件
 //子组件通过defineProps进行接收
 //子组件渲染父组件传递的数据
 import son from './components/son.vue'
 import {ref} from 'vue'
  // 在setup语法中，组件导入之后就能够直接使用，不需要使用componets进行局部注册
 const money = ref(100)
 const car = ref('玛卡巴卡')
</script>
<style scoped>
</style>


子组件：

<template>
<div>
    我是子组件
    <div>{{ money }}</div>
    <div>{{ car }}</div>
</div>
</template>
<script setup>
const props = defineProps({
    money: String,
    car:Number
})
</script>

 7.##   子传父组件：

        //1.子组件通过defineEmit获取emit对象
       //子组件通过emit触发事件，并且传递数据
       //父组件提供组件
       //父组件通过自定义事件的方法给最子组件注册事件

  父组件：

 <template>

  金钱 {{money }}
  卡车 {{ car }}  

     <son :money=" money" 
          :car="car"
          @changhuanche="changhuanche" 
          @changmoney="changmoney"
         ></son>
         </template>

    <script setup >
 //实现的步骤
 // 父组件提供数据
 // 父组件将数据传递给子组件
 //子组件通过defineProps进行接收
 //子组件渲染父组件传递的数据
 import son from './components/son.vue'
 import {ref} from 'vue'
  // 在setup语法中，组件导入之后就能够直接使用，不需要使用componets进行局部注册
 const money = ref(100)
 const car = ref('玛卡巴卡')
 const changhuanche = (value)=>{
      car.value = value
 }
 const changmoney = (value)=>{
    money.value = value
 }
</script>
<style scoped>  </style>

子组件：

<template>
<div>
    我是子组件
    <div>{{ money }} <button @class="changcar">换车</button></div>
    <div>{{ car }} <button @click="changmoneyF">换钱</button></div>
</div>
</template>
<script setup>
const props = defineProps({
  money: Number,
  car: String,
})
const emit = defineEmits([changmoney,changhuanche])
const changcar = ()=>{
    emit('changhuanche','碰碰车')
}
const changmoneyF = ()=>{
    emit('changmoney',props.money-1,)
}
</script>

8,## 跨组件通讯

 //通过跨级组件provide和 inject函数来实现
  //祖先组件 

<script setup>
import { provide, ref } from 'vue';
import ParentCom from './ParentCom.vue';


// 1. app组件数据传递给child
const count = ref(0);
provide('count', count);

// 2. app组件函数传递给child，调用的时候可以回传数据
const updateCount = (num) => {
  count.value += num;
};
provide('updateCount', updateCount);
</script>

<template>
  <div
    class="app-page"
    style="border: 10px solid #ccc; padding: 50px; width: 600px"
  >
    app 组件 {{ count }} updateCount
    <ParentCom />
  </div>
</template>
<template>
  <div
    class="app-page"
    style="border: 10px solid #ccc; padding: 50px; width: 600px"
  >
    app 组件 {{ count }} updateCount
    <ParentCom />
  </div>
</template>


  // 父级组件

<script setup>
import ChildCom from './ChildCom.vue';
</script>
  

<template>
  <div class="parent-page" style="padding: 50px">
    parent 组件
    <hr />
    <ChildCom />
  </div>
</template>


// 孙子组件
<script setup>
const count = inject('count');
const updateCount = inject('updateCount');
</script>

<template>
  <div class="child-page" style="padding: 50px; border: 10px solid #ccc">
    child 组件 {{ count }} <button @click="updateCount(100)">修改count</button>
  </div>
</template>