一. emit传值(全局data中的值传递)
data: {
eventHub: new Vue(),
},
this.$root.eventHub.$emit(
"getCardAccount",
111
);
this.$root.eventHub.$on("getCardAccount", this.getCardAccount);
getCardAccount(val) {
this.roomCard = val;
},
二. $parent
import HelloWorld from '@/components/HelloWorld'
import storeManue from '@/components/storeManue'
const router = new Router({
routes: [{
path: '/',
name: 'HelloWorld',
redirect: '/store/index',
component: HelloWorld,
children: [{
path: '/store/index',
name: 'storeManue',
component: storeManue,
},{
path: '/store/buyProducts',
name: 'buyProducts',
component: buyProducts,
},{
path: '/store/productCar',
name: 'productCar',
component: productCar,
}],
}
]
<template>
<div class="hello">
<div class="demo-content-block" v-resize="resize" :style="{height:bottomHeight}">
<router-view></router-view>
</div>
<mu-container>
<mu-bottom-nav :value.sync="shift" >
<mu-bottom-nav-item value="home" title="首页" @click.native="storeManue" icon="home"></mu-bottom-nav-item>
</mu-container>
</div
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
shift: 'home',
bottomHeight: '',
}
},
}
</script>
<template>
<div>
storeManue
</div>
</template>
<script>
export default {
data(){
return {
};
},
created(){
console.log(this.$parent.shift)
this.$parent.shift = ‘111’;
},
}
</script>
三. props (与第二种基本相同,只是传值方式获取方式不同)
import HelloWorld from '@/components/HelloWorld'
import storeManue from '@/components/storeManue'
const router = new Router({
routes: [{
path: '/',
name: 'HelloWorld',
redirect: '/store/index',
component: HelloWorld,
children: [{
path: '/store/index',
name: 'storeManue',
component: storeManue,
},{
path: '/store/buyProducts',
name: 'buyProducts',
component: buyProducts,
},{
path: '/store/productCar',
name: 'productCar',
component: productCar,
}],
}
]
<template>
<div class="hello">
<div class="demo-content-block" v-resize="resize" :style="{height:bottomHeight}">
<router-view :shift="shift"></router-view>
</div>
<mu-container>
<mu-bottom-nav :value.sync="shift" >
<mu-bottom-nav-item value="home" title="首页" @click.native="storeManue" icon="home"></mu-bottom-nav-item>
</mu-container>
</div
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
shift: 'home',
bottomHeight: '',
}
},
}
</script>
<template>
<div>
storeManue
</div>
</template>
<script>
export default {
props: ['shift'],
data(){
return {
};
},
created(){
console.log(this.shift)
},
}
</script>
四. 独立组件之间的传值(通过文件引用使用独立文件的组件)
<template>
<div>
<p class="warning-tip" id="warning_tip" :style="{display:show}">{{message}}</p>
</div>
</template>
<script>
export default{
data(){
return{
show:'none',
}
},
props:['isShow','message','time'],
watch:{
isShow(newval){
console.log(newval)
if(newval){
this.warningTip(this.time);
}
}
},
methods:{
warningTip(time){
this.show = 'block';
setTimeout(()=>{
this.show = 'none';
this.$emit('child-say', false);
}, time)
}
}
}
</script>
<style>
.warning-tip {
position: absolute;
z-index: 1000;
top: 52%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 9px 20px 7px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 4px;
white-space: nowrap;
margin: 0;
}
</style>
<template>
<div>
<tips :isShow="isShow" :message="message" :time="time" v-on:child-say="childSay"></tips>
<button @click="deleteNumber"></button>
</div>
</template>
<script>
import tips from '@/components/tips'
export default {
components: { tips },
data() {
return {
time: '',
message: '',
isShow: false
}
},
created() {
},
methods: {
childSay(){
this.isShow = false;
},
deleteNumber(){
this.isShow = true;
this.message = '选购数量不能小于1件';
this.time = '2000';
},
},
}
</script>