创建自己的免费网站,做门户网站赚广告费,中国空间站图片,网站解析设置Vue3学习第三篇 01. 组件组成02. 组件嵌套关系03. 组件注册方式04. 组件传递数据Props05. 组件传递多种数据类型06. 组件传递Props校验07. 组件事件08. 组件事件配合v-model使用09. 组件数据传递10. 透传Attributes 01. 组件组成 在vue当中#xff0c;组件是最重要的知识… Vue3学习第三篇 01. 组件组成02. 组件嵌套关系03. 组件注册方式04. 组件传递数据Props05. 组件传递多种数据类型06. 组件传递Props校验07. 组件事件08. 组件事件配合v-model使用09. 组件数据传递10. 透传Attributes 01. 组件组成 在vue当中组件是最重要的知识因为在vue当中是组件化开发也就是说所有的内容都是由组件所组成的。 比如我们写一个项目这个项目有很多功能每个功能都是由一个完整的组件去实现的把这些功能或者说这些组件拼在一起就形成了一个完整的项目。 组件最大的优势就是可复用性 意思就是我们把一个功能抽离成一个组件之后这个功能就可以被多次引用。 当使用构建步骤时我们一般会将Vue组件定义在一个单独的.vue文件中这被叫做单文件组件简称SFC template标签承载所有的html标签 script标签承载所有的业务逻辑 style标签承载所有的样式 所以一个vue的组件就承载了所有的我们页面所要呈现的内容包含结构的html、逻辑的js、样式的css。
下面我们来看组件是如何使用的 注意scoped 如果不加它则样式全局可用。 02. 组件嵌套关系 下面我们来实操完成页面
1Header: 以此类推Main和Aside
2Main
3Aside: 03. 组件注册方式 一个Vue组件在使用前需要先被“注册”这样Vue才能在渲染模板时找到其对应的实现。 组件注册有两种方式全局注册和局部注册。 我们平常所使用的就是局部注册。引入
1全局注册 以Header为例 在main.js中通过app.component注入。括号内 第一个为它起的名日后我们要引用的名字 第二个它的名字 全局注册则不需要在App.vue内import引入以及不需要components注入只需要显示即可。引入和注入在main.js内 2局部注册
04. 组件传递数据Props (1)普通Props父传子 在parent组件中在child 展示 的标签内传递给child数据 child用Props接收 结果 2动态传递数据 我们上面parent传递给child的数据是写死的其实我们可以动态传递数据。 注意
05. 组件传递多种数据类型 06. 组件传递Props校验
(1)校验 vue组件可以对传递过来的数据类型校验 也可以是数组包括很多类型 传递过来的数据类型满足其中一个即可 2默认值 用default设置默认值0 传递则显示20不传则显示默认值0传的话有:ageage 注意 其实就是通过函数来增加默认值 返回。 (3)必选项 必须传递数据 不传递数据则报警告。 注意 props是只读的不允许修改父元素传递过来的数据但可以修改自己data内的数据
07. 组件事件
先前我们已经讲过事件处理给页面中的元素添加事件如按钮的点击事件。 今天我们就来学习组件事件给组件本身添加事件目的是用来做组件之间的数据传递的
注意在老版本中称为自定义事件 props只能父传子而自定义事件则可以实现子传父 也可以写在页面上
child组件也可以如下 08. 组件事件配合v-model使用
前面我们学过v-model是表单中使用的一个指令在input标签或者其他标签内用在用户输入的同时来获取用户所输入的信息。
那么在组件中呢则是 在组件A中输入数据在组件B中实时得到数据。 下面是两个组件Main和Search。 我们希望在Search组件的表单内输入数据Main组件中获取数据一边展示搜索框的内容
要怎么做到呢答结合自定义事件和侦听器两者来实现。
09. 组件数据传递 先前我们并没有传递函数而函数是可以互相携带参数的所以我们可以利用这个细节来实现子传父 实际上还是A给B传只不过在传递的时候B给A回了个参数 实际上还是调用A中的函数执行 10. 透传Attributes
不常用。了解即可。 相当于h3里面具有了attr-container的样式。
还有个知识点 把inheritAttrs设为false这样则其不生效。
