526互联

Vue3语法基本使用

发布时间 2023-09-13 11:22:06作者: 潇潇-lucky

1、watch 使用

watch(监听数据源,执行函数,[配置参数])    
//配置参数： 立即执行 深度监听
{immediate: true, deep: true }

　　1.1 监听基本数据类型单一数据源　　　

<script setup>
import {ref, watch} from 'vue'
 let name = ref('张麻子')

 //监听器
watch(name,(newVal,oldVal)=>{
    console.log('变量发生了改变...',newVal);
})
</script>

　    1.2 监听引用数据类型单一数据源

<script setup>
import {reactive, ref, watch} from 'vue'
let user = reactive({name:'张三',age:14})
 //监听器
watch(()=>user.name,(newVal,oldVal)=>{
  console.log('对象user中的name属性发生了变化..',newVal);
})
</script>

　　1..3 监听引用数据类型 多数据源[深度监听]

<template>
  <div>
    <button @click="addNum()"> 添加随机数</button>
    <div v-for="item in nums" :key="item">{{ item }}</div>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
let nums = reactive([]);

//添加随机数
const addNum = () => {
  let num = Math.ceil(Math.random() * 100);
  nums.push(num);
}
//监听数组变化-深度监听
watch(()=>nums,(newVal,oldVal)=>{
    console.log('nums数组发生了变化..',newVal);
},{deep:true})

</script>　　

2、组件使用

创建 src/components/Son.vue

App.vue中导入并使用该组件

vue3.2 中当我们导入子组件时，setup语法糖会自动去注册该组件，所以注册语句不用写了。

　　

<template>
  <div>
    <son></son>
  </div>
<script setup>
import Son from './components/Son.vue'
</script>

3、组件通信

3.1 父传子 defineProps

  • 父组件 
    <template>
  <div>
      <Son class="box" title="我是父组件传递的标题" :likes="likes"></Son>
  </div>
</template>

<script setup>
  import Son from './components/Son.vue'
  let likes = ['张三','李四']
</script>
  • 子组件 
    <script setup>
const props=defineProps({
    title:{
        type:String,
        default:''
    },
    likes:{
        type:Array,
        default:()=>[]
    }
})
</script>

    　　

    3.2 子传父 defineEmits

    • 子组件 
      <template>
    <div>
        <button @click="sendData">传递数据</button>
    </div>
</template>

<script setup>
//定义自定义事件
const emit = defineEmits(['send'])
//自己的事件执行函数
const sendData = () => {
    //执行自定义事件
    emit('send', '我是儿子组件传递的数据')
}
</script>　
      • 父组件 
        <template>
  <div>
      <Son class="box"  @send="getData" ></Son>
  </div>
</template>

<script setup>
  import Son from './components/Son.vue'
  //触发自定义事件-接收数据
  const getData = (data)=>{
    console.log(data);
  }
</script>