网站开发技术学习,网站备案 公司注销,山东省住房和城乡建设厅网站6,上海建筑建材业网官网前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件#xff0c;可以从这三个部分展开#xff0c;它们可以帮助你快速了解一个组件的所有功能。本文的代码请猛戳https://github.com/ljianshu/Blog#xff0c…前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件可以从这三个部分展开它们可以帮助你快速了解一个组件的所有功能。本文的代码请猛戳https://github.com/ljianshu/Blog纸上得来终觉浅大家动手多敲敲代码一、属性1.自定义属性propsprop 定义了这个组件有哪些可配置的属性组件的核心功能也都是它来确定的。写通用组件时props 最好用对象的写法这样可以针对每个属性设置类型、默认值或自定义校验属性的值这点在组件开发中很重要然而很多人却忽视直接使用 props 的数组用法这样的组件往往是不严谨的。// 父组件 // 子组件 props: { name: String, type: { //从父级传入的 type它的值必须是指定的 success, warning, danger中的一个如果传入这三个以外的值都会抛出一条警告 validator: (value) { return [success, warning, danger].includes(value) } }, onChange: { //对于接收的数据可以是各种数据类型同样也可以传递一个函数 type: Function, default: () { } }, isVisible: { type: Boolean, default: false }, list: { type: Array, // 对象或数组默认值必须从一个工厂函数获取 default: () [] } }从上面的例中可以得出props 可以显示定义一个或一个以上的数据对于接收的数据可以是各种数据类型同样也可以传递一个函数。2.inheritAttrs这是2.4.0 新增的一个API默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。可通过设置 inheritAttrs 为 false这些默认行为将会被去掉。注意这个选项不影响 class 和 style 绑定。 上个例中title属性没有在子组件中props中声明就会默认挂在子组件的根元素上如下图所示3. data与props区别相同点两者选项里都可以存放各种类型的数据当行为操作改变时所有行为操作所用到和模板所渲染的数据同时都会发生同步变化。不同点data 被称之为动态数据在各自实例中在任何情况下我们都可以随意改变它的数据类型和数据结构不会被任何环境所影响。props 被称之为静态数据在各自实例中一旦在初始化被定义好类型时基于 Vue 是单向数据流在数据传递时始终不能改变它的数据类型而且不允许在子组件中直接操作 传递过来的props数据而是需要通过别的手段改变传递源中的数据。至于如何改变我们接下去详细介绍4.单向数据流这个概念出现在组件通信。props的数据都是通过父组件或者更高层级的组件数据或者字面量的方式进行传递的不允许直接操作改变各自实例中的props数据而是需要通过别的手段改变传递源中的数据。那如果有时候我们想修改传递过来的prop,有哪些办法呢方法1过渡到 data 选项中在子组件的 data 中拷贝一份 propdata 是可以修改的export default { props: { type: String }, data () { return { currentType: this.type } }}在 data 选项里通过 currentType接收 props中type数据相当于对 currentType type进行一个赋值操作不仅拿到了 currentType的数据而且也可以改变 currentType数据。方法2利用计算属性export default { props: { type: String }, computed: { normalizedType: function () { return this.type.toUpperCase(); } }}以上两种方法虽可以在子组件间接修改props的值但如果子组件想修改数据并且同步更新到父组件却无济于事。在一些情况下我们可能会需要对一个 prop 进行『双向绑定』此时就推荐以下这两种方法方法3使用.sync// 父组件 父组件msg{{ msg }} 父组件数组{{ arr }} 打开model框
