vue参数传递

 

1. 子父组件传参

　　　　1) 父组件->子组件

　　　　①在父组件里面的“子组件占位便签”中，动态绑定传递参数属性，属性名为子组件接收的参数名，属性值为父组件发送的参数名。

<v-child :a="str"></v-child>

//js

data:{

str:”这是父组件的str”

}

②在子组件的props中接受参数

<p>{{a}}</p>

//js

data:{},

props:[‘a’],

　　　　2) 子组件->父组件

　　　　①在父组件中定义数据接收方法

get(a){

    console.log(a)

}

　　　　②在父组件中的“子组件占位便签”中添加属性 @事件名='父组件中的方法(方法不加括号)'

<v-header @send="get"></v-header>

　　　　③在子组件中调用方法this.$emit('事件名',所需传递的数据)

{{this.$emit('send',a)}}

//js

data{

    a:’这是子组件的参数a’

}

　　　　3) slot（插槽，用于传递标签）

　　　　①在父组件里面的“子组件占位便签”中插入标签

<v-child>

    <div slot=’test’>这是插槽</div>

</v-child>

　　　　②在子组件中使用slot标签,标签name属性设置为所传递标签的slot标签的值

<slot name=’test’></slot>

 

    2.路由传参

　　　　1)直接使用路由导航传参

　　　　刷新页面不会数据不会丢失，适合传递key

　　　　注：修改路由后不能直接跳转原路径

　　　　①配置路由

{

path:’/page/:id’,//接受参数的路径,id为传递参数可改名

component:’page’//接受参数的组件

}

　　　　②发送参数

　　　　在需要发送参数的页面

　　　　A:在router-link设置参数(id为需要传递的参数)

:to=’page/id’

 

　　　　B:通过this.$router.push或replace跳转

@click=’toPage()’

toPage(){

this.$router.push({

path:`page/${id}`,

})

}

　　　　③接受参数

this.$route.params.id

　　　　2) params

　　　　刷新页面数据会丢失

　　　　通过路由的name属性来确定配置的路由

　　　　然后通过Params传递参数

　　　　①配置路由

{

path:’/page’,//接受参数的路径,id为传递参数可改名

name:’page’

component:’page’//接受参数的组件

}

 

 

　　　　②发送参数

this.$router.push({

path:`/page`,

params:{

id:id,

}

})

　　　　③接受参数

this.$route.params.id

 

　　　　3) query

　　　　query和params相似，但在地址栏显示参数？id=?&name=?

　　　　①配置路由

{

path:’/page’,//接受参数的路径,id为传递参数可改名

name:’page’

component:’page’//接受参数的组件

}

　　　　②发送参数

this.$router.push({

　　path:`/page`,

　　query:{

　　　　id:id,

　　}
})

　　　　③接受参数　　

this.$route.query.id

　　3.VueX

　　　　直接使用在需要的组件调用VueX里面的数据

　　　　函数this.$store.state.变量名

　　　　函数this.$store.commit('变量名',参数)

　　　　（参数直接用,分隔）