vue3.0js 非prop属性的值和setup函数的使用

张哥编程

发布于 2024-12-13 11:24:12

6430

非prop属性的值

一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute。

因为显式定义的 prop 适用于向一个子组件传入信息，然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的 attribute，而这些 attribute 会被添加到这个组件的根元素上。

例如，想象一下你通过一个 Bootstrap 插件使用了一个第三方的 bootstrap-date-input 组件，这个插件需要在其 input 上用到一个 data-date-picker attribute。我们可以将这个 attribute 添加到你的组件实例上：

然后这个 data-date-picker=“activated” attribute 就会自动添加到的根元素上。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .bg1 {
            background: #C1FFE4;
        }

        .bg2 {
            width: 120px;
            ;
        }
    </style>
</head>

<body>
    <div id="app">
        <input-con class="bg2" type="password"></input-con>
    </div>
    <script>
        const vm = Vue.createApp({});
        vm.component('input-con', {
            // template: '<input class="bg1"',
            template: '<input class="bg1" type="text"',
            inheritAttrs: false,  //不会继承外部组件的属性；，即password不会覆盖text
        });
        //在指定的dom上装载应用程序;
        vm.mount('#app');
    </script>
</body>

</html>

Vue3 中的setup 一种是setup函数，一种是script setup

setup函数

setup函数原理说明

由于setup 是在beforeCreate 和 create 生命周期阶段，组件还没有创建，即还没有进入 data 方法阶段。

setup 返回的结果集作为 (传统写法)data 和 method 的值，确切点说是绑定到组件对象的属性。

setup函数特性

1、setup函数是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数也就说在 setup函数中是无法使用 data 和 methods 中的数据和方法的

2、setup函数是 Composition API（组合API）的入口

3、在setup函数中定义的变量和方法最后都是需要 return 出去的不然无法再模板中使用

setup 函数将接收两个参数，props&context

Props ：props接收父组件传入的值，为Proxy对象，且为响应式，所以不能使用 ES6 解构，它会消除 prop 的响应性

setup 包含的生命周期

onBeforeMount——挂载开始前调用

onMount——挂载后调用

onBeforeUpdate——当响应数据改变，且重新渲染前调用

onUpdated——重新渲染后调用

onBeforeUnmount——Vue实例销毁前调用

onUnmounted——实例销毁后调用

onActivated——当keep-alive组件被激活时调用

onDeactivated——当keep-alive组件取消激活时调用

onErrorCaptured——从子组件中捕获错误时调用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setup函数的案例</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <post-item :post-content="content"></post-item>
    </div>
    <script>
        //创建一个应用程序案例;
        const vm = Vue.createApp({
            data() {
                return {
                    content: '越来越细'
                }
            }
        });
        //创建组件;
        vm.component('PostItem', {
            //声明props
            props: ['postContent'],
            setup(props) {
                Vue.watchEffect(() => {
                    console.log(props.postContent);
                });
            },
            template: '<h3>{{ postContent }}</h3>',
        });
        //在指定的DOM元素上装载应用程序实例的根组件;
        vm.mount('#app');
    </script>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-04-06，如有侵权请联系 cloudcommunity@tencent.com 删除

函数