<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<Son1 :show="state"></Son1>
<Son2 @toggle="son2Fun"></Son2>
</div>
<template id="son1">
<div v-if="show">
兄弟1
</div>
</template>
<template id="son2">
<div>
兄弟2
<button @click="son2Fun">toggle</button>
</div>
</template>
<script>
Vue.component('Son1', {
template: "#son1",
props: ['show'],
})
Vue.component('Son2', {
template: "#son2",
methods: {
son2Fun() {
this.$emit('toggle')
}
}
})
new Vue({
el: '#app',
data: {
state: true
},
methods: {
son2Fun() {
this.state = !this.state
}
}
})
</script>
</body>
</html>
vue新兄弟组件之间传值 emit
最新推荐文章于 2023-03-14 10:28:10 发布