vue3不同语法格式对比的实例代码

默认的模板方式,和vue2差不多,在组件中使用setup函数

// 父组件
<template>
  <div>
    <div>
      <div>{{city}}</div>
      <button @click="changeReactive">改变reactive</button>
      <button @click="handleFather">点击父组件</button>
    </div>
    <Child ref="childRef" @handleBtn="handleBtn" @testClick="testClick" city="成都" />
  </div>
</template>

<script>
import { ref, onMounted, toRefs, reactive } from 'vue'
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  setup () {
    const handleBtn = (val) => {
      console.log('btn', val)
    }

    const testClick = (val) => {
      console.log('testClick', val)
    }

    const childRef = ref(null)

    const handleFather = () => {
      childRef.value.observed.a = 666 //父组件修改子组件的值
      console.log('获取子组件的方法', childRef.value)
      // 子组件需要定义expose,如果不定义,那么需要返回,相应的函数,一般不直接返回,如果页面上没有用到
      //直接通过expose(暴露)需要的方法或者值就行了
    }

    // 通过setup函数的方法写,需要返回,页面上用到的方法,和值
    // 如果是reactve定义的值,通过解构的方式页面上渲染的值不是响应式的,需要通过toRefs转换,然后解构
    // ...toRefs(testReactive)

    const testReactive = reactive({
      city: '北京',
      age: 22
    })

    const changeReactive = () => {
      testReactive.city = '重庆'
    }

    return {
      handleBtn,
      testClick,
      handleFather,
      ...toRefs(testReactive),
      changeReactive,
      childRef
    }
  }
}
</script>

//子组件
<template>
  <div>
    {{observed.a}}
    <button @click="handleBtn">点击</button>
  </div>
</template>

<script>
import { defineProps, defineEmits, defineEmit, defineExpose, reactive } from 'vue'

export default {
  props: {
    city: String
  },

  /* 设置这个主要是为了,让ctx.attrs访问不到这个属性 */
  /* props上设置了有的属性,在attrs上,也不会显示 */

  emits: ['testClick'],  //设置这个的目的,是为了让attrs上没有对应的自定义方法,
  //子组件如果设置了peops,那么在attrs上也访问不到对应的值
  //arrts在vue3中功能有所增强,挂载了自定义方法,和class,style
  //在vue2中自定义方法是挂载到,$listeners,在vue3中$liseners已被移除

  setup (props, ctx) {
    const { expose, emit } = ctx
    const handleBtn = () => {
      console.log('btn', ctx)
      emit('testClick', 666)
    }

    const observed = reactive({
      a: 1
    })

    function clickChild (value) {
      observed.a = value
    }

    expose({
      clickChild, //暴露自定义方法,父组件调用
      observed// 暴露子组件的值
    })

    return {
      observed,
      handleBtn
    }
  }
}
</script>

在script标签上写setup  <script setup>

// 父组件
<template>
  <div>
    <button @click="handleFather">点击父</button>
    <Child ref="childRef" @handleBtn="handleBtn" @testClick="testClick" city="成都" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
// 这种方式写不用在return导出页面上用到的方法和值,需要用什么直接在vue上解构出对应的defin
const childRef = ref(null)

const handleBtn = (val) => {
  console.log('btn', val)
}

const testClick = (val) => {
  console.log('testClick', val)
}

const handleFather = () => {
  console.log('获取子组件的方法', childRef.value)
  childRef.value.testFatherClick()  //父组件调用子组件的方法
  // 子组件通过defineExpose暴露出对应的方法
}

</script>

// 子组件
<template>
  <div>
    <button @click="handleBtn">点击</button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, defineExpose, reactive } from 'vue'

const props = defineProps({
  city: String
})

const emit = defineEmits(['handleBtn', 'testClick'])

const handleBtn = () => {
  // console.log('btn', props, emit)
  emit('testClick', 12)
}

const testFatherClick = () => {
  console.log('测试父组件点击子组件')
}

const observed = reactive({
  a: 1
})

defineExpose({ //暴露方法给父组价
  testFatherClick,
  observed
})

</script>

<style scoped>
</style>

通过jsx方式渲染,非常接近react的方式,也是我最推荐的方式,jsx对ts也很支持,.vue文件没有tsx支持得好

// 父组件
import { ref, reactive } from 'vue'
import Child from './Child.jsx'

const Father = {
  setup() {
    // 在jsx中定义的ref在页面上使用需要通过.value去访问
    const city = ref('北京')

    const changeCity = () => {
      city.value = '杭州'
    }

    const childRef = ref(null)

    const handelFather = (add) => {
      //也是通过在组件暴露expose方法
      // city.value = '杭州'
      console.log('childRef', childRef.value)
    }

    const testChildClick = (val) => {
      console.log('测试子组件点击', val)
    }

    return () => {
      return (
        <div>
          <div>{city.value}</div>
          <button onClick={changeCity}>改变城市</button>
          <button onClick={handelFather}>点击父</button>
          <Child testChildClick={testChildClick} ref={childRef} />
        </div>
      )
    }
  }
}

export default Father

//子组件
import { ref, reactive } from 'vue'

const Child = {
  props: {
    testChildClick: Function
  },

  setup(props, { emit, expose }) {
    const { testChildClick } = props
    const testFatherClick = () => {
      console.log('测试父组件点击子组件')
    }

    const handelBtn = () => {
      // emit('testChildClick') //在jsx中这种方式不行
      // console.log('props', props)
      testChildClick('返回值给父组件')
      // 只能通过这种方法,这也相当于react,相当于传递一个函数给子组件,子组件把值,通过函数传给父组件
    }

    expose({
      testFatherClick
    })

    return () => {
      return (
        <div>
          <button onClick={handelBtn}>子组件传值给父组件</button>
        </div>
      )
    }
  }
}

export default Child

总结

到此这篇关于vue3不同语法格式对比的文章就介绍到这了,更多相关vue3语法格式对比内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue3不同语法格式对比的实例代码

    默认的模板方式,和vue2差不多,在组件中使用setup函数 // 父组件 <template> <div> <div> <div>{{city}}</div> <button @click="changeReactive">改变reactive</button> <button @click="handleFather">点击父组件</button> <

  • JavaScript校验Number(4,1)格式的数字实例代码

    项目里面有个录入,需要数字格式进行校验,前端使用的是miniUI框架,miniUI文档里面自带了校验,vtype="float",校验浮点数的,但是它不能做到校验这个浮点数有几位整数和几位小数,所以就有必要重写写一个js函数来校验: 实现思路: 1.获取所填写的值 2.判断是否为空,不为空执行3 3.对字符串trim()去空格,并且判断以"."开始或者结尾的都不是合法的数字,给出提示. 4.提前判断字符串是否是true或者false,因为下面要使用Number函数,

  • java 日期各种格式之间的相互转换实例代码

    java 日期各种格式之间的相互转换实例代码 java日期各种格式之间的相互转换,直接调用静态方法 实例代码: java日期各种格式之间的相互转换,直接调用静态方法 package com.hxhk.cc.util; import java.text.SimpleDateFormat; import java.util.Date; import com.lowagie.text.pdf.codec.postscript.ParseException; public class DateUtil

  • python 把数据 json格式输出的实例代码

    有个要求需要在python的标准输出时候显示json格式数据,如果缩进显示查看数据效果会很好,这里使用json的包会有很多操作 import json date = {u'versions': [{u'status': u'CURRENT', u'id': u'v2.3', u'links': [{u'href': u'http://controller:9292/v2/', u'rel': u'self'}]}, {u'status': u'SUPPORTED', u'id': u'v2.2'

  • POI对Excel自定义日期格式的读取(实例代码)

    用POI读取Excel数据:(版本号:POI3.7) 1.读取Excel private List<String[]> rosolveFile(InputStream is, String suffix, int startRow) throws IOException, FileNotFoundException { Workbook xssfWorkbook = null; if ("xls".equals(suffix)) { xssfWorkbook = new H

  • Vue模板语法中数据绑定的实例代码

    1.单项数据绑定 <div id="di"> <input type="text" :value="input_val"> </div> <script> var app = new Vue({ el: '#di', data: { input_val: 'hello world ' } }) </script> 通过浏览器 REPL 环境可以进行修改 app.input_val = '

  • python获取时间及时间格式转换问题实例代码详解

    整理总结一下python中最常用的一些时间戳和时间格式的转换 第一部分:获取当前时间和10位13位时间戳 import datetime, time '''获取当前时间''' n = datetime.datetime.now() print(n) '''获取10位时间戳''' now = time.time() print(int(now)) '''获取13位时间戳''' now2 = round(now*1000) print(now2) 运行结果为: 2018-12-06 11:00:30

  • C# 图片格式转换的实例代码

    在日常工作中,经常需要不同格式的图片,有时还需要进行图片格式的相互转换,本文以一个简单的小例子,简述图片格式转换的常见方法,仅供学习分享使用,如有不足之处,还请指正. 涉及知识点 OpenFileDialog 打开文件对话框,用于选择文件,可以设置过滤后缀. FolderBrowserDialog 文件夹选择对话框,用于选择一个文件夹,可以新增. ImageFormat 图片类型枚举. Bitmap 位图对象,包含对应的属性和内容. Stream 流对象的基类. FlowLayoutPanel

  • 利用python+ffmpeg合并B站视频及格式转换的实例代码

    利用python+ffmpeg合并B站视频及格式转换 B站客户端下载的视频一般有两种格式:早期的多为blv格式(由flv格式转换而来,音视频轨道在同一文件下). 如今的多为m4s格式,音频轨视频轨分开 以下为利用ffmpeg简单对文件处理,使其转换为大多数播放器能正常播放的mp4格式 前提:已正常安装ffmpeg import tkinter as tk from tkinter import filedialog import os import tkinter.messagebox from

  • PHP JSON格式数据交互实例代码详解

    在PHP中解析JSON主要用到json_encode和json_decode两个PHP JSON函数,比PHP解析XML方便很多,下面详细介绍下PHP JSON的使用.JSON基础介绍 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON主要有两种结构: "名称/值"对的集合,在PHP中可以理解为关联数组 (associative array). 值的有序列表(An ordered list of values).在PHP中可以理解为

随机推荐