首页 > 其他分享 >Vue3语法基本使用

Vue3语法基本使用

时间:2023-09-13 11:22:51浏览次数:45  
标签:基本 vue watch Son 语法 newVal Vue3 组件 监听

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>
        

          

标签:基本,vue,watch,Son,语法,newVal,Vue3,组件,监听
From: https://www.cnblogs.com/xiaolucky/p/17699106.html

相关文章

  • Vue~vue3-sfc-loader用法
    1.vue2-sfc-loader版本参考这个:(vue2&vue2-sfc-loader)https://article.juejin.cn/post/72369546129882972742.vue3-sfc-loader版本的基础写法:(vue3&vue3-sfc-loader)<template><div><component:is="data.remote"v-if="data.remote&q......
  • Java 基本类型和包装类
    Java是基于对象的,所以我们都需要以对象的想法来进行思维。但Java又提供了8个基本类型,这8个基本类型基本上都和数字有关,是直接可以使用的类型。 基本类型大小包装器类型boolean/Booleanchar16bitCharacterbyte8bitByteshort16bitShortint32......
  • MySQL SQL语法大全
    SQL语法基础知识总结|JavaGuide(Java面试+学习指南)基本概念数据库术语数据库(database)-保存有组织的数据的容器(通常是一个文件或一组文件)。数据表(table)-某种特定类型数据的结构化清单。模式(schema)-关于数据库和表的布局及特性的信息。模式定义了数据在表中如何存储......
  • OpenTiny Vue组件库实现跨框架(vue2、vue3、react、solid)
    本文由TinyVue组件库核心成员郑志超分享,首先分享了实现跨框架组件库的必要性,同时通过演示demo和实际操作向我们介绍了如何实现一个跨框架的组件库。前言前端组件库跨框架是什么?前端组件库跨框架是指在不同的前端框架(如React、Vue、Solid等)之间共享和复用组件的能力。这种能力可以让......
  • vue3.*安装axios具体步骤
    在项目的命令行处使用命令进行axios的安装npminstallaxiosvue-axios--legacy-peer-deps--save其余的命令可能会报错;......
  • 普及一点基础语法知识
    https://www.bilibili.com/read/cv25225883/ 作者:Larry想做技术大佬https://www.bilibili.com/read/cv25225883/出处:bilibili 公布下答案,以及,顺便普及一点基础语法知识。 eoplelieallthetime,it'sauniversalthing.这个句子的所谓“语法错误”,没那么容易分析,我......
  • 如何在 Zsh 中启用语法高亮?
    在Zsh中启用语法高亮可以让我们在终端中更加方便地识别命令的关键字、参数和特殊符号,提高工作效率和命令行使用体验。在本文中,我们将介绍如何在Zsh中启用语法高亮。Zsh是什么?Zsh是一种Unixshell,是Bourneshell的一种替代品。它提供了更多的功能和特性,比如命令补全、自动纠错、历......
  • QTableView部分基本使用、与数据库搭建
    创建一个QSqlTableModel来管理数据库表格的数据,可以在后续步骤中使用这个模型来与表格内容进行交互。QSqlTableModel*model=newQSqlTableModel;model->setTable("your_table_name");//设置表格名称model->select();//从数据库中选择数据设置QTableView模型:将QSqlTableMo......
  • Docker的基本操作
       ......
  • Vue3中使用pinia全局状态管理库
    ❝本期介绍一下pinia在vue3中的简单使用,以及如何使用pinia实现多页面状态共享。❞什么是piniaPinia是一个用于Vue应用程序的轻量级状态管理库。与vuex的区别pinia是vue3的官方状态管理库,vuex是vue2的官方状态管理库pinia更加轻量级pinia能更好的配合Vue3与TSpinia的使用比Vuex简......