中山做网站优化,被黑网站查询,做网站的图片大小是多少,海南网站策划一、父子组件的通信 在上一篇博文中#xff0c;我们提到了子组件是不能引用父组件或者Vue实例的数据的。 但是#xff0c;在开发中#xff0c;往往一些数据确实需要从上层传递到下层#xff1a; 比如在一个页面中#xff0c;我们从服务器请求到了很多的数据。其中一部分数…一、父子组件的通信 在上一篇博文中我们提到了子组件是不能引用父组件或者Vue实例的数据的。 但是在开发中往往一些数据确实需要从上层传递到下层 比如在一个页面中我们从服务器请求到了很多的数据。其中一部分数据并非是我们整个页面的大组件来展示的而是需要下面的子组件进行展示。这个时候并不会让子组件再次发送一个网络请求而是直接让大组件(父组件)将数据传递给小组件(子组件)。
如何进行父子组件间的通信呢Vue官方提到
通过props向子组件传递数据通过事件向父组件发送消息 在下面的代码中我直接将Vue实例当做父组件并且其中包含子组件来简化代码。 真实的开发中Vue实例和子组件的通信和父组件和子组件的通信过程是一样的。
二、父级向子级传递
2.1、props基本用法 在组件中使用选项props来声明需要从父级接收到的数据。 props的值有两种方式
方式一字符串数组数组中的字符串就是传递时的名称。方式二对象对象可以设置传递时的类型也可以设置默认值等。
我们先来看一个最简单的props传递 2.2、props数据验证 在前面我们的props选项是使用一个数组。 我们说过除了数组之外我们也可以使用对象当需要对props进行类型等验证时就需要对象写法了。 验证都支持哪些数据类型呢 当我们有自定义构造函数时验证也支持自定义的类型 注意v-bind绑定的属性名称不要使用驼峰写法vue不支持这种写法如下图所示 要想使用驼峰标识应该把上图中的cInfo改成c-info,如下图所示
三、子级向父级传递 props用于父组件向子组件传递数据还有一种比较常见的是子组件传递数据或事件到父组件中。 我们应该如何处理呢这个时候我们需要使用自定义事件来完成。 什么时候需要自定义事件呢
当子组件需要向父组件传递数据时就要用到自定义事件了。我们之前学习的v-on不仅仅可以用于监听DOM事件也可以用于组件间的自定义事件。
自定义事件的流程
在子组件中通过$emit()来触发事件。在父组件中通过v-on来监听子组件事件。
我们来看一个简单的例子 我们来看一个简单的例子
我们之前做过一个两个按钮1和-1点击后修改counter。我们整个操作的过程还是在子组件中完成但是之后的展示交给父组件。这样我们就需要将子组件中的counter传给父组件的某个属性比如total。
四、父子组件的访问
4.1 父子组件的访问方式 $children 有时候我们需要父组件直接访问子组件子组件直接访问父组件或者是子组件访问根组件。 父组件访问子组件使用$children或$refs reference(引用)子组件访问父组件使用$parent
我们先来看下$children的访问
this.$children是一个数组类型它包含所有子组件对象。我们这里通过一个遍历取出所有子组件的message状态。 $children的缺陷通过$children访问子组件时是一个数组类型访问其中的子组件必须通过索引值。但是当子组件过多我们需要拿到其中一个时往往不能确定它的索引值甚至还可能会发生变化。 有时候我们想明确获取其中一个特定的组件这个时候就可以使用$refs $refs的使用 $refs和ref指令通常是一起使用的。
首先我们通过ref给某一个子组件绑定一个特定的ID。其次通过this.$refs.ID就可以访问到该组件了。 4.2 父子组件的访问方式 $parent 如果我们想在子组件中直接访问父组件可以通过$parent 注意事项
尽管在Vue开发中我们允许通过$parent来访问父组件但是在真实开发中尽量不要这样做。子组件应该尽量避免直接访问父组件的数据因为这样耦合度太高了。如果我们将子组件放在另外一个组件之内很可能该父组件没有对应的属性往往会引起问题。另外更不好做的是通过$parent直接修改父组件的状态那么父组件中的状态将变得飘忽不定很不利于我的调试和维护。
五、插槽slot
5.1为什么使用slot slot翻译为插槽 在生活中很多地方都有插槽电脑的USB插槽插板当中的电源插槽。 插槽的目的是让我们原来的设备具备更多的扩展性。 比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。 组件的插槽
组件的插槽也是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。
栗子移动网站中的导航栏。
移动开发中几乎每个页面都有导航栏。导航栏我们必然会封装成一个插件比如nav-bar组件。一旦有了这个组件我们就可以在多个页面中复用了。 但是每个页面的导航是一样的吗No我以京东M站为例
5.2 如何封装这类组件呢slot
如何去封装这类的组件呢
它们也很多区别但是也有很多共性。如果我们每一个单独去封装一个组件显然不合适比如每个页面都返回这部分内容我们就要重复去封装。但是如果我们封装成一个好像也不合理有些左侧是菜单有些是返回有些中间是搜索有些是文字等等。
如何封装合适呢抽取共性保留不同。
最好的封装方式就是将共性抽取到组件中将不同暴露为插槽。一旦我们预留了插槽就可以让使用者根据自己的需求决定插槽中插入什么内容。是搜索框还是文字还是菜单。由调用者自己来决定。
这就是为什么我们要学习组件中的插槽slot的原因。
5.3 slot基本使用
了解了为什么用slot我们再来谈谈如何使用slot
在子组件中使用特殊的元素就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。
我们通过一个简单的例子来给子组件定义一个插槽
slot中的内容表示如果没有在该组件中插入任何其他内容就默认显示该内容有了这个插槽后父组件如何使用呢
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body!--
1.插槽的基本使用 slot/slot
2.插槽的默认值 slotbutton/slot
3.如果有多个值同时放入到组件进行替换时一起作为替换元素
--
div idappcpnbutton按钮/button/cpncpnspanhhh/span/cpnhrcpna href#百度/ap插槽内有多个标签/p/cpnhrcpn/cpncpn/cpncpn/cpn
/divtemplate idcpndivh2我是组件/h2slotbutton默认值按钮/button/slot/div
/template
script src../js/vue.js/script
scriptconst app new Vue({el: #app,data: {message: 你好啊},components: {cpn: {template: #cpn}}})
/script/body
/html5.4 具名插槽slot
当子组件的功能复杂时子组件的插槽可能并非是一个。
比如我们封装一个导航栏的子组件可能就需要三个插槽分别代表左边、中间、右边。那么外面在给插槽插入内容时如何区分插入的是哪一个呢这个时候我们就需要给插槽起一个名字
如何使用具名插槽呢 非常简单只要给slot元素一个name属性即可 slot namemyslot/slot
我们来给出一个案例 这里我们先不对导航组件做非常复杂的封装先了解具名插槽的用法。
5.5 编译作用域 在真正学习插槽之前我们需要先理解一个概念编译作用域。 官方对于编译的作用域解析比较简单我们自己来通过一个例子来理解这个概念 我们来考虑下面的代码是否最终是可以渲染出来的 my-cpn v-showisShow/my-cpn中我们使用了isShow属性。 isShow属性包含在组件中也包含在Vue实例中。 答案最终可以渲染出来也就是使用的是Vue实例的属性。
为什么呢 官方给出了一条准则父组件模板的所有东西都会在父级作用域内编译子组件模板的所有东西都会在子级作用域内编译。
而我们在使用的时候整个组件的使用过程是相当于在父组件中出现的。 那么他的作用域就是父组件使用的属性也是属于父组件的属性。因此isShow使用的是Vue实例中的属性而不是子组件的属性。 5.6 作用域插槽 作用域插槽是slot一个比较难理解的点而且官方文档说的又有点不清晰。 这里我们用一句话对其做一个总结然后我们在后续的案例中来体会 父组件替换插槽的标签但是内容由子组件来提供。 我们先提一个需求 子组件中包括一组数据比如pLanguages: [‘JavaScript’, ‘Python’, ‘Swift’, ‘Go’, ‘C’]
需要在多个界面进行展示
某些界面是以水平方向一一展示的某些界面是以列表形式展示的某些界面直接展示一个数组
内容在子组件希望父组件告诉我们如何展示怎么办呢 利用slot作用域插槽就可以了
我们来看看子组件的定义 在父组件使用我们的子组件时从子组件中拿到数据
我们通过template slot-scopeslotProps获取到slotProps属性在通过slotProps.data就可以获取到刚才我们传入的data了
