1.props 傳值
//父組件 傳遞參數到自組件
<template>
<div>
<my-vue :name="name" :age="age"></my-vue> //:name="name" 傳遞name的值到子組件
</div>
</template>
<script>
import MyVue from '@/compnent/myvue'; //引入子頁面
export default{
data(){
return {
name:"wangwang",
age:18
}
},
components:{
"my-vue":MyVue //vue對駝峯大小寫不區分
}
}
</script>
<style>
</style>
//子組件接收參數
<template>
<div>
我是子組件
</div>
</template>
</template>
<script>
export default{
data(){
return {
}
},
props:{ //props 也可以是數組形式 props:["name","age"]
name:{
type:String
},
age:{
type:String,
default:18
}
},
watch:{
name:function(oldval,newval){
//newval 取到值可以進行一些邏輯開發，比如根據name 請求後臺接口
},
age:function(oldval,newval){}
},
components:{
}，
}
</script>
<style>
</style>
2.$ref
2.$ref 傳值
//父組件 傳遞參數到自組件
<template>
<div>
<my-vue ref="myvue"></my-vue> //:name="name" 傳遞name的值到子組件
</div>
</template>
<script>
import MyVue from '@/compnent/myvue'; //引入子頁面
export default{
data(){
return {
name:"wangwang",
age:18
}
},
mounted:{ //頁面渲染完成之後
let this=this
this.$nextTick(()=>{ //箭頭函數裏面this指向會邊
// this.$refs.myvue.mess;//拿到子組件裏面的值
this.$refs.myvue.message(this.name)//調用子組件的方法傳值
})
},
components:{
"my-vue":MyVue //vue對駝峯大小寫不區分
}
}
</script>
<style>
</style>
//子組件接收參數
<template>
<div>
我是子組件
</div>
</template>
</template>
<script>
export default{
data(){
return {
mess:"aaa"
}
},
watch:{
},
components:{
}，
method:{
message(name){
//接收父組件傳遞來的值
}
}
}
</script>
<style>
</style>
2.$ref