js 实现vue—引入子组件props传参
参考：https://www.cnblogs.com/xiaohuochai/p/7388866.html
效果
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>js实现vue—引入子组件props传参</title>
<link rel="stylesheet" href="css/1.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="js/1.js"></script>
</head>
<body>
<div id="app">
<keep-alive>
<router-view class="child-view" v-if="$route.meta.keepAlive"></router-view>
</keep-alive> <router-view class="child-view" v-if="!$route.meta.keepAlive"></router-view>
</div>
<script type="text/x-template" id="page1">
<div>
<TopNav :show-btn="ifShow"></TopNav>,
<!-- 对于props声明的属性来说，在父级HTML模板中，属性名需要使用中划线写法 -->
<p class="content">页面1</p>
<router-link to="/page2" tag="span" class="btnRouter">页面2</router-link>
<BlankPage id="BlankPage1"></BlankPage>
<!-- 多个组件引入同一组件改变显示/隐藏状态时，需绑定指定id，否则多个组件会混乱 -->
</div>
</script> <script type="text/x-template" id="page2">
<div>
<TopNav :show-btn="ifShow"></TopNav>
<p class="content">页面2</p>
<BlankPage id="BlankPage2"></BlankPage>
</div>
</script>
</body>
</html>
1.js
$(document).ready(function() {
Vue.prototype.$show = function(obj) { //全局函数1
var o = $(obj);
o.css('display', 'block');
};
Vue.prototype.$hide = function(obj) { //全局函数2
var o = $(obj);
o.css('display', 'none');
};
Vue.use(VueRouter);
// 顶部组件 start
var TopNav = Vue.extend({
data() {
return {
showBtn: false
}
},
props: ['showBtn'],
watch: {
showBtn: function(newVal, oldVal) {
this.showBtn = newVal;
}
},
template: "<p class='title'> " +
"<span>顶部组件</span>" +
"<span v-show='showBtn' class='btnBack' @click='$router.back(-1)'>返回</span>" +
"</p>"
})
/* 子级props属性声明时，使用小驼峰或者中划线写法都可以；
而子级模板使用从父级传来的变量时，需要使用对应的小驼峰写法
*/
// 顶部组件 end
// 正在加载组件 start
var BlankPage = Vue.extend({
template: "<div class='BlankPage'>" +
"<div class='loadingDiv'>" +
"<p class='loadingIcon'>" +
"<img src='img/load.gif' alt=''>" +
"</p>" +
"<p class='loadingTxt'>正在加载...</p>" +
"</div>" +
"</div>"
})
// 正在加载组件 end
// 页面1 start
var Page1 = Vue.extend({
data() {
return {
ifShow: false
}
},
template: "#page1",
// 局部注册子组件
components: {
TopNav,
BlankPage
}
})
//页面1 end
//页面2 start
var Page2 = Vue.extend({
data() {
return {
ifShow: true
}
},
template: "#page2",
components: {
TopNav,
BlankPage
}
})
//页面2 end
var router = new VueRouter({
routes: [{
path: '/',
name: 'Page1',
meta: {
index: 0,
keepAlive: true,
title: '页面1'
},
component: Page1
},
{
path: '/page2',
name: 'Page2',
meta: {
index: 1,
keepAlive: false,
title: '页面2'
},
component: Page2
}
]
})
router.beforeEach((to, from, next) => {
var toDepth = to.meta.index;
var fromDepth = from.meta.index;
if (to.meta.title) {
document.title = to.meta.title;
}
if (toDepth == 'undefined' || toDepth == undefined) {
if (true) {
//这个可以关闭安卓系统的手机
document.addEventListener('WeixinJSBridgeReady', function() {
WeixinJSBridge.call('closeWindow');
}, false);
//这个可以关闭ios系统的手机
WeixinJSBridge.call('closeWindow');
// wx.closeWindow();
}
return;
} else if (toDepth < fromDepth) { //返回
from.meta.keepAlive = false;
to.meta.keepAlive = true;
}
next()
})
var app = new Vue({
el: '#app',
router
}).$mount('#app')
})
1.css
@CHARSET "UTF-8";
body {
width: 100%;
height: 100%;
}
body,
div,
p {
margin: 0;
padding: 0;
text-align: center;
}
.content {
margin-top: 200px;
}
.title {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
padding-left: 50px;
line-height: .60px;
display: flex;
align-items: center;
color: #fff;
background-color: lightseagreen;
z-index: 1;
}
.btnBack {
margin-left: 50%;
}
.btnRouter {
width: 100px;
height: 30px;
line-height: 30px;
margin-top: 20px;
display: inline-block;
background-color: lightseagreen;
color: #fff;
border-radius: 10px;
}
.NoMore {
font-size: 14px;
color: #888;
margin-top: 30px;
text-align: center
}
#NoMore1,
#NoMore2 {
display: none;
}
.NoMoreTxt:before {
content: "";
width: 100px;
height: 1px;
display: inline-block;
margin-bottom: 5px;
margin-right: 1px;
background-color: #dadada;
}
.NoMoreTxt:after {
content: "";
width: 100px;
height: 1px;
display: inline-block;
background-color: #dadada;
margin-bottom: 5px;
margin-left: 10px;
}
#BlankPage1,
#BlankPage2 {
display: none;
}
.BlankPage {
width: 100%;
height: 100%;
font-size: 14px;
color: #fff;
background-color: #fff;
-webkit-transition: all .2s ease-out;
transition: all .5s ease-out;
transition: all .5s ease-out;
transition: all .5s ease-out;
position: fixed;
top: 0;
z-index: 12;
}
.loadingDiv {
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 50px;
}
.loadingTxt {
font-size: 14px;
color: #666;
text-align: center;
}
.loadingIcon {
text-align: center;
}
.loadingIcon img {
display: inline-block;
width: 40%;
height: 48px;
}
js 实现vue—引入子组件props传参的更多相关文章
- 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作
父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- vue非父子组件间传参问题
最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...
- Vue.js父与子组件之间传参
父向子组件传参 例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,component ...
- 【Angular】父组件监听子组件事件(传参)
Angular官方文档Demo地址:>component-interaction#parent-listens-for-child-event 举一个自己在写的项目
- Vue的组件及传参
目录 Vue的组件及传参 Vue组件的概念 根组件 子组件(局部组件) 父组件向子组件传值 子组件向父组件传值 Vue的组件及传参 Vue组件的概念 我们首先要知道组件的概念,实际上每一个组件都是一个 ...
- react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...
- Vue 给子组件传递参数
Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...
- vue:页面跳转和传参（页面之间，父传子，子传父）
1.返回上一个页面: A.<a @click="$router.back(-1)" class="btn">重新加载</a> B.thi ...
- Vue 给子组件绑定v-model
父组件使用子组件时,使用v-model指令,在子组件中使用value获取props的值 父组件 <template> <div style="margin:20px;dis ...
随机推荐
- NX二次开发-UFUN获取直线的两个端点UF_CURVE_ask_line_data
NX9+VS2012 #include <uf.h> #include <uf_obj.h> #include <uf_ui.h> UF_initialize(); ...
- 关于对现阶段vue项目的一些总结和感想
一.前言 现阶段手上vue的项目差不多快完了,空闲之余回反复对整个项目的代码结构.实现细节以及框架上的做了一些思考和优化.下面打算把想到的和重点实现的方法记录一下. 二.回顾 对于常规操作,这里不做过 ...
- 笔试题-求小于等于N的数中有多少组素勾股数
题目描述: 一组勾股数满足:a2+b2=c2: 素勾股数:a,b,c彼此互质. 输入正整数N: 输出小于等于N的数中有多少组勾股数. 例: 输入:10 输出:1 思路:我是直接暴力破解的…… 首先找出 ...
- hexo next主题深度优化(九)，给博客加入主题，护眼主题，护眼色。
文章目录 背景 效果 码 _layout.swig custom.styl eye.js 引用eye.js 直接引用 main.js pjax的函数中重写 个人博客:https://mmmmmm.me ...
- LeetCode刷题笔记-递归-将有序数组转换为二叉搜索树
题目描述 将一个按照升序排列的有序数组,转换为一棵高度平衡二叉搜索树. 本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1. 示例: 给定有序数组: [-10, ...
- JVM 与 Linux 的内存关系详解
来源:美团技术团队 在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身使用大约800m. ...
- Git仓库操作命令
创建仓库 git init 在当前目录执行,会生成.git目录文件,这个和SVN一致. 提交到仓库 git commit -m "first commit" -m:表示提交描述,必 ...
- Unity中DoTween的使用
在Unity手游开发中,经常用到插值运算,我们可以使用Mathf.Lerp自行去实现效果,但是使用插件提高了我们的开发效率,这里归结一下DoTween的基本使用方式以及效果说明: 直接代码: usin ...
- 23种常用设计模式的UML类图
23种常用设计模式的UML类图 本文UML类图参考<Head First 设计模式>(源码)与<设计模式:可复用面向对象软件的基础>(源码)两书中介绍的设计模式与UML图. 整 ...
- JS对象 返回/设置时间方法 get/setTime() 返回/设置时间，单位毫秒数 一小时为：60*60*1000
返回/设置时间方法 get/setTime() 返回/设置时间,单位毫秒数,计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数. 如果将目前日期对象的时间推迟1小时,代码如下: &l ...