Skip to content
鼓励作者:欢迎打赏犒劳

01-vue3学习整理

主要记录一下Vue3的知识

推荐博客:http://web.wiyp.top/#/Vue/VueBook33

组件传值

setup 语法糖

父传子-defineProps

主要是 用vue的 defineProps 来接收数据

父页面

vue
<Home :data2="[1,2]"/>

子组件 Home.vue

vue
<template>
    <div>
        我是子组件
    </div>
</template>
<script setup>
    import { defineProps } from 'vue'
    const props = defineProps({
        data2: {
            default: [],
            type: Array,
        },
    });
    console.log(props.data2)
</script>

子传父-defineEmits

javascript
// 子组件:创建自定义事件,传递数据
const emit = defineEmits(['自定义事件']);
emit('自定义事件', 数据1, 数据2);
 
// 父组件:绑定自定义事件,接收数据
<组件标签 @自定义事件="函数名"></组件标签>
 
const 函数名 = (参数1, 参数2) => {
  console.log(参数1, 参数2);
}

父组件

vue
<Home  @clickChild="clickEven"/>

<script setup>
    const clickEven=(val1,val2)=>{
      console.log(val1,val2);
    }
</script>

子组件

vue
<template>
    <div>
        <el-button type="primary" @click="alert2">按钮</el-button>
    </div>
</template>
<script setup>
    import { defineEmits  } from 'vue'
    // 使用defineEmits创建名称,接受一个数组
    const emit = defineEmits(['clickChild'])
    function alert2() {
        //传递给父组件
        let param={
            content:'b'
        }
        emit('clickChild',param,"cccc")
    }
</script>

声明变量

文档: https://cn.vuejs.org/guide/essentials/reactivity-fundamentals.html

setup 语法糖

reactive函数

vue
<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })
</script>

<template>
<button @click="state.count++">
  {{ state.count }}
</button>
</template>

计算属性

setup 语法糖

computed函数

javascript
import { computed, reactive } from 'vue'

const state = reactive({
  count: 0
})

const doubleCount = computed(() => {
  return state.count * 2
})

console.log(doubleCount.value) // 输出:0

state.count = 1

console.log(doubleCount.value) // 输出:2

上次更新:

如有转载或 CV 的请标注本站原文地址