Vue2 访问父级数据this.$parent 修改插值语法delimiters
效果:Hello Jack !My name is Jack ! This month is September .changeName代码:Vue.component("sayHello",{template:"Hello ${this.$parent.username} !",//访问父实例(a
·
效果:
Hello Jack !
My name is Jack ! This month is September .
<div id="app2">
<say-hello></say-hello>
<my-name :name="username"></my-name>
</div>
<script>
Vue.component("sayHello",{
template:"<h2>Hello ${this.$parent.username} !</h2>", //访问父实例(app2)数据this.$parent
delimiters:['${',"}"] //修改插值语法delimiters
});
var app2 = new Vue({
el:"#app2",
data:{
month:"September",
username:"Lily"
},
components:{
"myName":{
template:`<div><p>My name is {{ name }} !
This month is {{ this.$parent.month }} .</p>
<button @click="changeName">changeName</button></div>`, //访问父实例(app2)数据this.$parent
props:["name"],
methods:{
changeName:function () {
this.$parent.username = "Jack";
}
}
}
}
});
</script>
更多推荐
已为社区贡献8条内容
所有评论(0)