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函数的使用的主要内容，如果未能解决你的问题，请参考以下文章