父传子
案例：
<html>
<head></head>
<body>
<div id="app">
<f></f>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="x-template" id="f">
<div>
<z :hello="hello"></z>
</div>
</script>
<script type="x-template" id="z">
<div>
{{hello}}
</div>
</script>
<script>
var z = {
props:{
hello:String,
},
name:"z",
template:"#z"
}
var f = {
name:"f",
data(){
return{
hello:"hello miao"
}
},
components:{
z:z
},
template:"#f"
}
var app = new Vue ({
el:"#app",
name:"app",
data:{
},
components:{
f:f
}
})
</script>
</body>
</html>
子传父和solt
案例：
<html>
<head></head>
<body>
<div id="app">
<f></f>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="x-template" id="f">
<div>
{{hello}}
<z :thief="thief"></z>
<p solt="solt1">新加入的数据</p>
</div>
</script>
<script type="x-template" id="z">
<div>
<button @click=thief(hello)>子传父</button>
<solt name="solt1">被覆盖的内容</solt>
<solt name="solt1">不会被覆盖的内容</solt>
</div>
</script>
<script>
var z = {
props:["thief"],
data(){
return{
hello:"hello miao"
}
},
name:"z",
template:"#z"
}
var f = {
name:"f",
components:{
z:z
},
methods:{
thief(g){
this.hello=g
}
},
data(){
return{
hello:""
}
},
template:"#f"
}
var app = new Vue ({
el:"#app",
name:"app",
data:{
},
components:{
f:f
}
})
</script>
</body>
</html>
1042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
