<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2>父组件布局</h2>
<div v-show="sb">你能看见我吗？？？</div>
<!-- <div v-show="wantShow">你能看见我吗？？？</div> -->
<hr />
<!-- <child-item v-bind:show="show" v-on:update:show="show = $event"></child-item> -->
<child-item :showww.sync="sb"></child-item>
<!-- <child-item :wantShow.sync="wantShow"></child-item> -->
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
子组件向父组件传值-携带参数
*/
Vue.component("child-item", {
props: ["showww"],
// props: ["wantShow"],
template: `
<div>
<h2>子组件布局</h2>
<button @click="handle">点我</button>
</div>
`,
methods: {
handle() {
// this.show = !this.show;
this.$emit("update:showww", !this.showww);
// this.$emit("update:wantShow", !this.wantShow);
},
},
});
var vm = new Vue({
el: "#app",
data: {
sb: true,
// wantShow: true,
},
methods: {},
});
</script>
</body>
</html>
