Vue3 开发手册1.0 ——setup函数+组件传值

1 初始化Vue3项目

1.1 创建Vue3项目

// vue create 项目名称
vue create vue3_project

1.2 启动Vue3项目

npm run serve

2 setup函数

• setup在生命周期函数beforeCreate(){}前被调用，且仅被调用一次，因此无法拿到实例this。
• 定义的数据、方法需return出去，否则无法响应。
  • return返回类型：
    • 对象：将定义的数据和方法返回出去,这样在html模板中可以直接进行调用取值

    setup(){
        // 定义数据
        let num = 1.0
        // 定义方法
        function changeNum(){}
        
        return {
        // 将定义的数据和函数返回出去,这样在html中才可以进行调用取值
            num,changeNum
        }
    }
    

    • 函数：在渲染函数中，已定义h——渲染函数，可完全替代该组件定义的所有内容

    setup(){
    // 在渲染函数中，已定义h 可完全替代该组件定义的所有内容
    return()=>h("h1","暂无") // 将该组件的内容替换为<h1>暂无</h1>
    }
    

3 组件传值

设置基本组件嵌套结构，此为在父组件中使用子组件。

// 父组件
<template>
   <Son></Son> <!--3 使用子组件 -->
</template>


import Son from "./components/Son.vue" // 1 引入子组件
export default{
    name:"Father",
    components:{Son} // 2 注册子组件
}

3.1 父向子传值

• 传值类型：
  • 属性值
  • 方法：当父向子传递方法时（在子组件上绑定自定义事件），可实现子向父传值。详情见 3.2 子向父传值
• 传值结果：
  • 传递的值：name="love"，子组件接收的值：Proxy(Object){name:"love"}
• 实现步骤：
  • 父组件中，在子组件身上绑定传递的值，告诉子组件我要给你传递这个值。
  • 子组件中，声明props接收父组件传递过来的值（相当于一个容器，真正使用修改是通过setup函数所设置的第一个参数实现）。此处定义的props位于setup函数之外。
  • 子组件中，setup的第一个参数setup(props,context){ }，为外部传递过来的值，类型为响应式对象Proxy(Object)。这与uni-app小程序的页面组件之间的传值方式很接近。
• 补充说明：
  • 父组件props传递的值，可以直接在html标签使用，该值本身是一个响应式对象。

// 父组件
<template>
    // 1 向子组件传递属性值
   <Son name="love"></Son>
</template>

// 子组件
<template>
    // props传递过来的值，可以直接在html使用
    <h1>{{name}}</h1>
</template>

export default{
    name:"Son",
    // 2 接收父组件传递过来的属性值-相当于容器
    props:["name"],
    // 3 在setup中使用setup值
    setup(props){
        console.log(props)
    }
}