vue2.0中组建里面套用组件_vue路由传值和vue单页组建父子组件传值

路由传值import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter);

let router = new VueRouter({

routes: [

{

path:'/',

meta: {

title: '漫画平台',

data:{

focus:"推荐"

}

},

component: (resolve) => require(['./views/index.vue'], resolve)

}

]

})

index.vue取值

{{focus}}

export default {

data () {

return {

focus:""

}

},

created: function () {

let data = this.$route.meta.data;

this.focus = data.focus;

},

methods: {

},

components:{

}

}

vue单页组建父子组件传值

index.vue

import Footer from './web/Foote.vue'

export default {

data () {

return {

users:{

focus: "推荐"

}

}

},

created: function () {

},

methods: {

},

components:{

Footer

}

}

Foote.vue

{{users}}

export default {

props:['users'],

data () {

return {

}

},

created: function () {

console.log(this.users);

},

methods: {

},

components:{

}

}

子组件向父组件传值

子向父传值需要一个“中转站”，如我写的getChildValue，命名随便写。

在子组件中使用$emit()来向父组件传值。第一个参数就是这个“中转站”，后面的参数是要传的值，可以是多个。

子组件 Foote.vue

点击向父组件传值

export default {

data () {

return {

}

},

created: function () {

},

methods: {

send:function(){

this.$emit("getChildValue","你好父组件!");

}

},

components:{

}

}

父组件 index.vue

子组件传过来的值是 “{{childValue}}”

import Footer from './web/Foote.vue'

export default {

data () {

return {

childValue:""

}

},

created: function () {

},

methods: {

getValue:function(val){

this.childValue = val;

}

},

components:{

Footer

}

}