<!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>
<style>
.box {
width: 400px;
height: 400px;
border: 1px solid rosybrown;
}
button {
color: white;
}
</style>
</head>
<body>
<div class="app">
<button @click="tab('red')" style="background: red">红色</button>
<button @click="tab('green')" style="background: green">绿色</button>
<button @click="tab('blue')" style="background: blue">蓝色</button>
<hr />
<son :color="color"></son>
</div>
<!-- 子组件模板 -->
<template id="s">
<div>
<div class="box" :style="sty">
{{color}}
<br />
{{sty}}
</div>
</div>
</template>
<!-- end -->
</body>
<script src="./vue2/vue.min.js"></script>
<script>
var son = {
template: "#s",
data() {
return {};
},
computed: {
sty() {
//依据 this.color 相应了this.color的变化 只要数据发生变化就执行一次代码
var str = "background:" + this.color;
return str;
},
},
props: ["color"], //接收父组件传值
mounted() {
//组件挂载之后 执行一次
console.log(this.color);
},
};
new Vue({
el: ".app",
data: {
color: "pink",
},
components: {
son,
},
methods: {
tab(c) {
console.log(c);
this.color = c;
},
},
});
</script>
</html>
|