html页面使用vue进行单页面开发，封装组件以及父子组件传值

最新推荐文章于 2022-05-20 18:15:16 发布
最新推荐文章于 2022-05-20 18:15:16 发布
阅读量2.9k 收藏 4
点赞数
分类专栏： 前端 文章标签： vue+html组件封装和传值
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41588568/article/details/106331619
版权
本文介绍了如何在HTML页面中使用Vue.js进行单页面开发，通过封装 vant 组件实现代码复用。文章详细展示了如何创建一个公共的cell组件，并在父组件中使用，同时讲解了父子组件间的传值方法，以此提升开发效率和代码维护性。
摘要由CSDN通过智能技术生成

一.首先在html页面中引入vue.js

二.由于多个页面用到相同的vant中相同的组件cell，所以写一个公共的组件，如下：

 子组件：

 父组件：

 

 效果:

 

qq_41588568
关注
专栏目录
原生html封装组件,手把手教你用原生Javascript封装一个Dialog组件
weixin_34036075的博客
05-30 1215
下来玩玩分析对外暴露的方法show(options) 显示dialogoptions 参数title 标题，默认为“”，不显示标题content 主内容，默认为"兄弟，你好像忘记传content的值了"skin 皮肤，默认为""，其实就是给dialog添加一个你的类名，方便重置样式btns 按钮组，默认为[‘确认’]，可选[‘xx’，‘xx’]，只取前两个作为有效值，第一个为confirm，第二个...
Vue.js实战项目：构建一个单页应用
最新发布
kkchenjj的博客
07-20 859
在Vue中，可以通过或在组件内部使用components选项来定义组件。-- 定义组件 --> < script > Vue . component('my-component' , {-- 使用组件 --> < div id = " app " > < my-component > </ my-component > </ div > < script > var app = new Vue({
vue通过引入js标签的方式在HTML上的组件写法，父子组件数据传递
热门推荐
xlzy
02-01 2万+
html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> title>Titletitle> link rel="styleshee
html中使用vue父子组件
xy405580364的博客
03-10 881
html中使用vue父子组件
vue和html传值,vue组件传值.html
weixin_40002009的博客
06-15 483
.ball{width: 20px;height: 20px;border-radius: 20px;background-color: red;}这是一个新的全局组件var app = new Vue({el:'#app',data:{msg:'1 父组件中的数据',},methods:{},components:{//子组件中默认无法调用父组件的data上的数据和methods方法login:...
html开发时使用js封装Vue组件（一）
qq_40600414的博客
08-23 2545
前端开发组件化是个很重要的思想，但是平常只是在node搭建的环境下，使用webpack管理react或者vue项目时，会自定义组件，然后其他页面引用自定义的组件。但是在普通的html前端页面开发时怎么去使用vue定义可重用组件呢，就像element-ui那样，我们可以不用node环境，而是引用js文件，也可以实现使用各种定义好的组件。 今天由于工作需要，电脑没有搭建vue项目，而是采用引入vue.js的方式开发页面，我需要定义很多页面都可以使用的公共组件，在仔细阅读了vue官网的组件化方...
html页面 使用vue进行单页面开发,封装组件以及父子组件传值
09-02
总之，使用Vue进行HTML页面的单页面开发可以帮助我们实现组件化开发和父子组件之间的数据传递。这种方式不仅提高了开发效率，还可以提升代码的可维护性和复用性。同时，Vue提供了很多方便的API和工具，可以让我们...
vue用公共组件页面传值_Vue—组件传值及vuex的使用
weixin_39625864的博客
12-24 476
一、父子组件之间的传值1.父组件向子组件传值：子组件在props中创建一个属性，用以接收父组件传来的值父组件中注册子组件在子组件标签中添加子组件props中创建的属性把需要传给子组件的值赋给该属性在子组件中创建props，然后创建一个名为 ‘img-src’ 的数据名//子组件BigImg.vue exportdefault{props: ['img-src'],methods: {...
vue、uni-app组件封装引入及父子组件传值（保姆级教程）
兄弟连之一个前端小白的成长
05-20 740
uni-app之页面组件封装+父子组件传值保姆级教程-(适合新手小白）
vue组件化可以调用html页面,vue组件（将页面公用的头部组件化）
weixin_39756540的博客
06-04 1458
呃……重新捡起前面用vue-cli快速生成的项目。之前是做过一个多页面的改造，以及引入vux的ui组件，这次在这个项目的基础上，再来聊聊vue中的component。别问我为啥总是写关于vue的博客，都是为了生计(………………)关于一些组件的概念之类的就不一一介绍了，官方文档说的很详细。下面进入正题，直接下载项目一 拿出之前的项目二 在这种需求下 ，自然就要使用我们的组件了，在index.js中添...
一步一步封装自己的HtmlHelper组件BootstrapHelper（三）
11-23
前言：之前的两篇封装了一些基础的表单组件，这篇继续来封装几个基于bootstrap的其他组件。和上篇不同的是，这篇的有几个组件需要某些js文件的支持。 BootstrapHelper系列文章目录 C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper（二） C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper（三：附源码） 一、NumberBoxExtensions NumberBoxExtensions是一个基于bootstra
html 引入 vue.js axios element-ui
11-05
有时候需要写一些简单的页面小交互，用node 构建前端项目总有那么不合适，感觉有点大材小用，所以用html 引入 静态js，构建简单的单页面，写一些小功能
vue单页面html,vue+vue-router+jquery 以传统模式开发单页面应用
weixin_39628247的博客
06-03 252
絮叨：前段时间要做一个混合开发 h5+Android，以及微信公众号开发，商城模块+订单模块由h5开发，想着若以vue-cli开发的话实在不方便，不需要那么多的依赖，每次有不同的页面入口，又要重新更换默认路由和打包，很是麻烦，所以本人就想这时用传统页面或许更简单一些，不要抛弃传统~。开发技术jquery + vue + vue-router + axios开发流程1.新建一个good.html 页...
html页面引入vue.js,普通html页面怎么引入.vue文件呢？
weixin_39720865的博客
06-03 1181
html页面引入vue组件需要在页面引入http-vue-loader.js注意：要查看页面引入vue组件的效果不能直接在本地打开index.html，会有跨域问题，可以在本地配置一个nginx转发，再用浏览器访问http://localhost:port/index.html1.创建my-component.vueHello {{who}}module.exports = {data: func...
vue.js html 相互传值,Vue 父子组件之间相互调用传值以及多层组件之间相互调用传值...
weixin_34871076的博客
07-01 370
一.父子组件传值要点1：父组件赋予子组件属性值，子组件通过props 来接收值。要点2：父组件可以通过 子组件对象($ref)，来调用子组件的属性以及方法要点3：子组件通过$emit 来调用父组件的方法示例如下：parent.vue This is parent ComponentC的值是：{{para}}import childComponent from"./child"; //引入一个组件...
vue.js html 相互传值,vue.js父子组件之间通过Prop传值
weixin_29147347的博客
07-01 231
前言：本文主要记录父子组件之间通过prop进行数据传递的方法一，即将Prop中的值赋值给本地定义的属性，不涉及Prop的其他特性父组件向子组件传值先写一个简单的子组件，内容如下{{msg}}export default {name: 'child',props: ['msg'],复制代码然后在父组件中引入子组件import child from '../components/child';expo...
vue单页面html,单页面可以用vue.js吗？
weixin_36219745的博客
06-03 745
单页面可以用vue.js吗？可以使用，单页面可以直接引入vue.js文件进行使用，用法如下：{{message}}//这是我们的Modelvar exampleData={message:'Hello world'}//创建一个vue实例或"ViewModel"//它连接View与Modelnew Vue({el:'#app',data:exampleData});使用Vue的过程就是定义MVVM...
html中的父子通信代码,Vue.js 父子组件通信的十种方式
weixin_42299472的博客
07-03 270
面试官：Vue 中父子组件通信有哪些方式？自己先想一分钟。无可否认，现在无论大厂还是小厂都已经用上了 Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。而且在面试当中也往往会问到关于 Vue 方面的各种问题，其中大部分面试官会问到如上这种问题。最近一直在做 Vue项目代码层面上的优化，说实话，优化别人的代码真是件痛苦的事情，功能实现尚且不说，就说代...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值