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', {//声明propsprops: ['postContent'],setup(props) {Vue.watchEffect(() => {console.log(props.postContent);});},template: '<h3>{{ postContent }}</h3>',});//在指定的DOM元素上装载应用程序实例的根组件;vm.mount('#app');</script>
</body></html>

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

vue组件之Prop属性
一般页面元素是有属性的,如a标签有href等属性,同样Vue中组件也是有属性的.在Vue组件中想要使用属性,首先需要在组件内部定义一些属性,这些属性在Vue中被为prop,在组件中通过props选项中 ...
vue组件中prop属性
Vue组件prop属性 prop大小写单项数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行. 每次父级组件发 ...
html标签默认值,HTML标签CSS属性默认值汇总
HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用. 以前一直在找这份文档,今天偶然在网上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote ...
js获取html元素并且修改属性,JavaScript中获取和修改元素属性的值
在上一篇关于<JavaScript中几个操作元素对象的函数方法>文章中记录了分别通过元素的ID属性,元素的标签名,Class类名来获取元素的节点对象. 今天记录两个函数可以用来获取和修改获 ...
类选择器选择非唯一属性无法精确取值的问题
类选择器选择非唯一属性无法精确取值的问题一.总结一句话总结:因为做的操作并不是精确选取,因为执行了两次选择器,所以肯定不对啊. 二.类选择器选择非唯一属性无法精确取值的问题 1.截图 2.代码 1 ...
如何查看 el-form-item 的prop属性_PHP 7.4中的类型属性（Typed Properties）
php中文网最新课程每日17点准时技术干货分享在PHP 7.4中添加了类型属性,并对PHP的类型系统进行了重大改进.这些更改是完全可选的,并且不破坏以前的版本. 在这篇文章中,我们将深入了解这个特 ...
vue_组件_非prop特性
非prop特性指的是,一个未被组件注册的特性.当组件接收了一个非prop特性时,该特性会被添加到这个组件的根元素上. 1.替换/合并已有的特性对于绝大多数特性来说,从外部供给组件的值会替换掉组件内部 ...
vue的Prop属性
转载自 Prop Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中 ...
组件、Prop属性的基本用法
Props的两种形式 Prop官方链接 Vue中Prop类型可以以字符串数组的形式列出: props:['title', 'likes', 'author'] 还可以以对象形式列出: props: { ...

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

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

最新文章

热门文章