$emit改成插槽slot
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<!-- <navbar @myevent="handleEvent"></navbar>
<sidebar v-show="isShow" ></sidebar> -->
<!-- <input type="text" ref="mytext"/>
<input type="password" ref="mypassword"/>
<div ref="mydiv">111111</div>
<button @click="handleAdd">add</button>
<child ref="mychild"></child> -->
<navbar @myevnet="click"></navbar>
<sidebar v-show="isShow"></sidebar>
</div>
</body>
<script>
Vue.component("navbar",{
template:`
<div style="background:yellow">
nabbar- <button @click="click1">11</button>
</div>
`,
methods: {
click1(){
this.$emit("myevnet");
}
},
})
Vue.component("sidebar",{
template:`
<ul style="background-color: yellow;width: 200px;height: 500px;" >
<li>首页</li>
<li>钱包</li>
<li>设置</li>
</ul>
`
})
new Vue({
el:"#box",
data:{
isShow:false
},
methods:{
click(){
this.isShow=!this.isShow
}
}
})
// Vue.component("child",{
// data(){
// return {
// myname:"child-111111111111111111111"
// }
// },
// template:`<div>
// child---{{myname}}
// </div>`
// })
// new Vue({
// el: "#box",
// // data: {
// // isShow: true
// // },
// methods: {
// handleAdd(data){
// console.log(this.$refs.mytext,this.$refs.mydiv)
// console.log(this.$refs.mychild.myname)
// }
// },
// })
// Vue.component("navbar", {
// template: `
// <div style="background-color: red;">
// <button @click="handleClick()">点击</button>-导航栏
// </div>
// `,
// methods: {
// handleClick(){
// this.$emit("myevent",'123')
// }
// },
// })
// 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>
<style>
.active{
background-color: green;
}
</style>
</html>
下面是插槽slot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="box">
<!-- <navbar @myevent="handleEvent"></navbar>
<sidebar v-show="isShow" ></sidebar> -->
<!-- <input type="text" ref="mytext"/>
<input type="password" ref="mypassword"/>
<div ref="mydiv">111111</div>
<button @click="handleAdd">add</button>
<child ref="mychild"></child> -->
<navbar>
<button @click="isShow=!isShow">11</button>
</navbar>
<sidebar v-show="isShow"></sidebar>
</div>
</body>
<script>
Vue.component("navbar",{
template:`
<div style="background:yellow">
nabbar- <slot></slot>
</div>
`,
// methods: {
// click1(){
// this.$emit("myevnet");
// }
// },
})
Vue.component("sidebar",{
template:`
<ul style="background-color: yellow;width: 200px;height: 500px;" >
<li>首页</li>
<li>钱包</li>
<li>设置</li>
</ul>
`
})
new Vue({
el:"#box",
data:{
isShow:false
}
,
// methods:{
// click(){
// this.isShow=!this.isShow
// }
// }
})
// Vue.component("child",{
// data(){
// return {
// myname:"child-111111111111111111111"
// }
// },
// template:`<div>
// child---{{myname}}
// </div>`
// })
// new Vue({
// el: "#box",
// // data: {
// // isShow: true
// // },
// methods: {
// handleAdd(data){
// console.log(this.$refs.mytext,this.$refs.mydiv)
// console.log(this.$refs.mychild.myname)
// }
// },
// })
// Vue.component("navbar", {
// template: `
// <div style="background-color: red;">
// <button @click="handleClick()">点击</button>-导航栏
// </div>
// `,
// methods: {
// handleClick(){
// this.$emit("myevent",'123')
// }
// },
// })
// 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>
<style>
.active{
background-color: green;
}
</style>
</html>
标签：slot,Vue,methods,11111,插槽,isShow,template,data,emit 来源： https://www.cnblogs.com/yyy1234/p/16064401.html