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

Posted tea_year

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3.0js 非prop属性的值和setup函数的使用相关的知识,希望对你有一定的参考价值。

非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>

以上是关于vue3.0js 非prop属性的值和setup函数的使用的主要内容,如果未能解决你的问题,请参考以下文章

vue3.0js局部组件注册案例

父子,子父,非父子组件通信

FreeCodeCamp:Profile Lookup

8. react 基础 - props 默认值和类型限制 与 Props , State , render 函数 关系

后台管理系统 菜单

通讯录查询(循环和if的使用) --freeCodeCamp