vue组件传值

1.父传子：

子组件：

<div>{{value}}</div>

pros:{

　　value:{

　　　　type:"",//类型

　　　　default:""//默认值

　　}

}

父组件:

被使用的子组件<child :value="被传值"></child>

 

子传父：

子：<div @click="fn"></div>

　　fn(){

　　　　this.$emit("fn","被传值")

　　}

父：<child @fn="fn"></child>

　　fn(value){}

 

兄弟传：

1.路由传值：

兄：this.$router.push({

　　path:"/",

　　query:{}//被传值

})

弟：this.$route.query

 

2.组件传：

全局封装$bus总线

Vue.prototype.$bus=new Vue()

兄：this.$bus.$emit("fn","被传值")

弟：先在生命周期调用一个函数，在该函数使用this.$bus.$on("fn",res=>{})

 

2.父子传：

<div @click="resval(val)">{{val}}</div>

<myinput ref="inputtype"></myinput>

 

父传子：

val:""

resval(val){　　

　　this.$refs.inputtype.type=this.val

}

 

子传父：

<input :type="inputtype" />

inputtype:""

mouted(){

　　this.$parent.val="text"

}