參考：https://www.cnblogs.com/xiaohuochai/p/7388866.html
效果：
props傳參.gif
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實現(xiàn)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>
<!-- 多個組件引入同一組件改變顯示/隱藏狀態(tài)時蟹瘾，需綁定指定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) { //全局函數(shù)1
var o = $(obj);
o.css('display', 'block');
};
Vue.prototype.$hide = function(obj) { //全局函數(shù)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屬性聲明時段磨，使用小駝峰或者中劃線寫法都可以憾儒；
而子級模板使用從父級傳來的變量時碰声，需要使用對應(yīng)的小駝峰寫法
*/
// 頂部組件 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) {
//這個可以關(guān)閉安卓系統(tǒng)的手機(jī)
document.addEventListener('WeixinJSBridgeReady', function() {
WeixinJSBridge.call('closeWindow');
}, false);
//這個可以關(guān)閉ios系統(tǒng)的手機(jī)
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;
}
