拿个例子来
<div id="box">
<navbar @myevent="handleEvent"></navbar>
<sidebar v-show="isShow" ></sidebar>
</div>
<script>
//组件1
Vue.component("navbar", {
template: `
<div style="background-color: red;">
<button @click="handleClick()">点击</button>-导航栏
</div>
`,
methods:{
handleClick(){
// console.log("子传父, 告诉父组件 ,取反您的isShow")
this.$emit("myevent",1000000000)
}
}
})
//组件2
Vue.component("sidebar", {
template: `
<div style="background-color: yellow;" >
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</div>
`
})
//根组件
new Vue({
el: "#box",
data: {
isShow: true
},
methods:{
handleEvent(data){
console.log("父组件的定义的事件",data)
this.isShow = !this.isShow
}
}
})
</script>
首先创建组件,组件一:navbar 组件二 :sidebar 根组件:使用名字被挂载(绑定)到vue实例上的标签,这里是 名为box 的 div
然后,子组件为什么叫子组件,其实就是和标签一样,包含关系,比如<div><p></p></div> div就是父,p就是子 组件一样的道理, 然后就是,组件定义的时候只是组件,不是父组件或者子组件,得有人叫他去当父或者当儿子,才能算父组件或者子组件。 所以这里根组件通过下面创建的组件的名字 来调用组件拿来当儿子(就成了子组件) 以组件名来创建自定义标签来使用。所以就有了
<navbar @myevent="handleEvent"></navbar>
<sidebar v-show="isShow" ></sidebar>
两个自定义标签 同时根组件也有了两个子组件,还加上了监听事件,和动态显示和隐藏。
还有就是,这里其实和html标签是一样的,只不过是自定义标签和dom原生标签的区别,里面的方法函数啥的都在vue实例里定义和使用
data: {
isShow: true
},
methods:{
handleEvent(data){
console.log("父组件的定义的事件",data)
this.isShow = !this.isShow
}
}
好了然后传递逻辑是这样的,首先在根组件把组件调用做子组件时 子组件里的内容就渲染出来了 页面上就有了按钮和内容啥的
点击按钮,点击事件就会触发,在点击事件方法里有个this.$emit() 用于发射数据给父组件或者其他监听,所以这里就是发射了个事件并带着一个数据参数(1000000000)出去 给监听了自己(@myevent:@表示监听者或监听器 myevent是$emit 发射的事件)的那个标签 ,当监听事件触发时,就会执行绑定监听事件的那个方法(事件处理器)(handleEvent)并把值(1000000000)当作参数传进去,这个方法(事件处理器)(handleEvent)在哪里呢,在vue里
new Vue({
el: "#box",
data: {
isShow: true
},
methods:{
handleEvent(data){
console.log("父组件的定义的事件",data)
this.isShow = !this.isShow
}
}
})
之前$emit发射事件时还有一个值(1000000000),当监听事件触发时,handleEvent方法(也是事件处理器)就会触发并且(1000000000)就自动当成参数传进去 所以handleEvent(data) 中的data就是1000000000
然后 handleEvent方法里的东西该怎样就怎样就好了
子传父就是这样的拉 @myevent是监听事件 handleEvent是方法也是事件处理器