乐趣区

Vue(非)父子组件的传值以及方法调用

1.vue 父组件给子组件传值的方法 <heador :userName=”username”></heador> 子组件中通过 props 接收传值 props:{username:{
type:String,
default:””
}}
2.vue 父组件调用子组件的方法 <heador ref=”header”></heador> this.$refs.header. 子组件的方法
3. 子组件传值给父组件一般通过点击事件 this.$emit(“getName”,this.msg) 在这里注册一个事件,把值通过事件带过去。然后在父组件中通过 <asidor @getName=”getNamefromchild”></asidor> 在 methods 中可以通过 getNamefromchild(data){data 就是传过来的值}
4. 子组件调用父组件的方法在子组件中 <el-button type=”primary” @click=”diaoyongparent”></el-button>diaoyongparent(){ this.$emit(“diaoyongParentfunc”) 这里可以带参数 } 然后在父组件中 <asidor @diaoyongParentfunc=”diaoyongbychild”></asidor>diaoyongbychild(){ alert(“ 调用父组件的方法了,如果有参数也可以哦 ”) }
5. 对于非父子组件的传值首先在 main.js 里面定义 Vue 对象的时候在 data 属性里面创建一个变量,并赋值为一个 vue 对象,这个变量在整个应用中都可以直接访问,他可以充当 EventHub 事件中心 new Vue({el:”#app”, router, store, components:{App}, data:{
Hub:new Vue()
}}) 然后在第一个组件里面 gotoside(){ this.$root.Hub.$emit(“oneEvent”,this.msg)} 然后在第二个组件里面 created(){ this.$root.Hub.$on(“oneEvent”,function(msg){alert(msg)})}

退出移动版