有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue3setup语法糖(setup语法糖总结)

vue 炮渣日记 4周前 (11-10) 20次浏览 已收录 0个评论 扫描二维码

<script setup>中无需return 声明的变量、函数以及import引入的内容,即可在<template/>使用。

<template>
  	<div @click="click()">{{ msg }}</div>
  	<p>{{ getToday() }}</p>
		<div v-show="data.visibile">显示隐藏</div>	
</template>
<script setup>
  import { getToday } from '@/utils'
  import { ref, reactive } from 'vue'
  const msg = ref('Helllo!')
  const data = reactive({
      visibile: false
  })
  const click = () => {
      console.log(msg)
      data.visibile = !data.visibile
  }
</script>

使用props实现父子组件传参

父组件:

<template>
  	<Child  :msg="msg"/>
</template>
<script setup>
	import { ref } from 'vue'
	import Child from './Child.vue'
	const msg = ref('Hello!')
</script>

子组件:

<template>
  <span>{{props.msg}}</span>
</template>

<script setup>
  import { defineProps } from 'vue'
  const props = defineProps({
    msg: {
      type: String,
      default: '默认'
    }
  })  
  // or
  //const props = defineProps(['msg'])
</script>

emits子组件调用父组件方法

父组件:

<template>
   <Child @parentFunction="parentFunction"/>
</template>
<script setup>
import Child from './child.vue'
// 接收子组件参数
const parentFunction = (val) => {
  console.log(val)
}
</script>

子组件:

<template>
   <el-form>
  	...
  </el-form>
   <el-button @click="submit">提交</el-utton>
</template>
<script setup>
  import { reactive, defineEmits } from 'vue';
  const form = reactive({
    name: '张三',
    age: '12',
    sex: '男'
  })
  const emit = defineEmits(['parentFunction'])
  // 提交并且传参
  const submit = () => {
    emit('parentFunction', form);
  }
</script>

provide和inject传值

父组件:

<template>
   <Child />
</template>
<script setup>
  import Child from './child.vue'
  import { provide, ref } from 'vue'
  const name = ref('张三')
  provide('name', name)
  provide('parentFunction',  val => {
    console.log(val, '接收子组件参数')
  })
</script>

子组件:

<template>
   <el-form>
  	...
  </el-form>
	<p>{{ name }}</p>
   <el-button @click="submit">提交</el-utton>
</template>
<script setup>
  import { inject, reactive } from 'vue';
  const form = reactive({
    name: '张三',
    age: '12',
    sex: '男'
  })
  const name = inject('name')
  const parentFunction = inject('parentFunction')
  const submit = () => {
    parentFunction(form)
  }
</script>

useRoute和useRouter路由

<script setup>
  import { useRoute, useRouter } from 'vue-router'

  const route = useRoute()
  const router = useRouter()
	
  // 获取query
  console.log(route.query)

  // 获取params
  console.log(route.params)

  // 路由跳转
  router.push({
  	path:  "/home"
  })
</script>

watch的使用

<script setup>
	import {  ref, reactive, watch  } from 'vue'
	 
	 const num = ref(0)
	 const msg = ref('hello')
	 const form = reactive({
			        name:'张三',
			        age:18,
     					sex: '男'
	})
   
	watch([num, msg], (newVal,oldVal) => {
	        console.log('num或msg变了', newVal, oldVal)
	}, { immediate: true })
	      
	 watch(() => form.name, (newVal, oldVal) => {
	    console.log('form.name', newValue, oldValue)
	 },{ deep: true }) 
 
</script>

总结:

暂时先记录这么多吧,毕竟现在用的还不是很多,总的来说开发体验还是比Vue2和Vue3.0开发还是改进了不少,代码更简洁了。写的不对的地方也欢迎大家在评论区指出哈

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址