vue项目情侣空间纪念日功能组件化

vue 组件

定义组件
新创建一个vue文件就可以了然后注意至少有一个根节点模板

<template>
<div class="">
</div>
</template>
<script>
</script>
<style>
</style>

然后在调用这个组件的父组件里进行继承注册使用三步
继承 --在<script>下面写import 名称 from '路径'
例子：

注册 --看图

使用 --直接<名称></名称>使用即可

例如：这个调用了五个组件！！

插槽

其实直接看官方文档就好了！

我来解释就是在子组件留个坑然后父组件调用的时候填上

个人使用例子：
父组件 – 调用子组件循环渲染record_list数组的数据

<!--这段代码纯粹是为了秀操作 体验一下 组件 插槽 的操作。写了别浪费！--><div v-for="(rec,index) in record_list" :key="rec.record_id">     <!--在外循环--><RecordShow v-bind:rec="rec" #delete>     <!--调用组件--><td ><a href="#" class="text" @click="del_record(rec.record_id, index)">删除</a></td>  <!--利用插槽 写在父组件中共享父组件作用域 并且可以写html语句 --></RecordShow></div>

子组件在这：

<template>
<table id="record_show" class="show"><tr><td class="text">{{rec.record_thing}}</td><td class="number">{{rec.record_number}}</td><td class="text">{{rec.record_day}}</td><slot name="delete"></slot></tr>
</table>
</template>
<script>
export default {props: ['rec'],  //子组件显式的用 props 选项声明它期待获得的数据，这里申明 它想要一个叫做 ’item‘的数据。
};
</script>
<style>
</style>

个人体会

个人从java的角度肤浅的理解组件就是继承！
但是涉及到作用域参数要传递过去用props
有的语句传递过去父组件的作用域就不能用了。此时可以用插槽，demo留在父组件，但是和子组件一起渲染。
还有子组件也可以传值给父组件，利用插槽命名。

巴拉巴拉我学会也是一遍一遍的看组件和插槽的官方说明再找个例子反复的看看看看看看看看看看看看看看看看看看真所谓书读百遍其义自现！！干巴爹！下班啦！！mua～

vue项目情侣空间纪念日功能组件化相关推荐

vue项目情侣空间纪念日功能模块
上一个星期学会了vue 部署运行接下来就想开发一个项目一方面可以练习一方面和男票有尝试使用一些恋爱app 觉得体验感并没有很理想就打算自己做一个吧! ヽ(✿ﾟ▽ﾟ)ノ.这也是学编程的初衷哇 ...
Vue学习笔记（二）组件化和模块化
Vue学习笔记(二)组件化和模块化前言组件化什么是组件化 1.基础使用 2.全局组件和局部组件 3.语法糖和模板抽离 4.组件的data为什么是函数 5.父子组件 5.1 父子组件 5.2 父子 ...
vue项目做微信分享功能
vue项目做微信分享功能安装sdk npm install weixin-js-sdk --save 方法 1.新建js文件wxapi.js 2.在wxapi.js中引入sdk以及配置一些基本信息( ...
Vue项目在页面添加水印功能
Vue项目在页面添加水印功能创建watermark.js文件 let watermark = {}let setWatermark = (str) => {let id = '1.234523 ...
vue项目中element-ui的分页器(组件封装）
vue项目中element-ui的分页器组件 <template><el-col :span="24" class="toolbar" sty ...
vue项目的骨架及常用组件介绍
vue项目基础结构一个vue的项目,我觉得最小的子集其实就是{vue,vue-router,component},vue作为基础库,为我们提供双向绑定等功能.vue-router连接不同的" ...
vue项目中可使用天气预报小组件推荐vue-mini-weather
该部分内容引自基于Vue开发的迷你实时天气预报组件由于该组件在2021.4.24日刚上传到npm仓库,请用npm安装! 1.安装 npm i vue-mini-weather --save 2.引 ...
聊一聊如何在 Vue 项目中实现水印功能
作者:熊的猫 https://juejin.cn/post/7132620574198595597 前言由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-water ...
vue项目接口地址暴露_vue组件暴露和.js文件暴露接口操作
1.将同一类型的组件放在一个文件夹下 2.在此文件夹下创建一个index.js 3.在index.js中导入组件,并把他们暴露出去 1.写法一 import studentCourse1 from ' ...

vue项目情侣空间纪念日功能组件化

vue 组件

插槽

个人体会

vue项目情侣空间纪念日功能组件化相关推荐

最新文章

热门文章

vue项目 情侣空间 纪念日功能组件化

vue 组件

插槽

个人体会

vue项目 情侣空间 纪念日功能组件化相关推荐

最新文章

热门文章

vue项目情侣空间纪念日功能组件化

vue项目情侣空间纪念日功能组件化相关推荐