<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="" id="myVue">
<my-component>
</my-component>
</div>
<!--子組件-->
<template id="child" >
<div id="">
<div @click='changedata'>子組件：{{data}}</div>
</div>
</template>
<!--父組件-->
<template id="father">
<div>
<mycomponent-child v-bind:data="str"></mycomponent-child>
</div>
</template>
</body>
<script type="text/javascript" charset="utf-8">
/*在父組件中的數據str，
* 將父組件的數據綁定到子組件的屬性data上
* 然后在子組件中就可以通過props接收到，
* 這樣在子組件中就可以使用變量 this.data1訪問到 父組件的 str1對應的值了。
*/
//當點擊子組件，觸發子組件的changedata方法，通過this.data = "父組件值被子組件修改了";改變了父級的str的值
//通過 this.$parent.fn()訪問父組件的方法fn()。
var child={
props:["data"],
template:"#child",
data:function(){
return{
str:"我是子組件數據"
}
},
methods:{
changedata:function(){
this.data = "父組件值被子組件修改了";
this.$parent.fn();
}
}
}
/*父組件*/
var father={
template:"#father",
data:function(){
return{
str:"我是父組件數據"
}
},
methods:{
fn:function(){
alert("我是父組件方法")
}
},
components:{
"mycomponentChild":child
}
}
vm=new Vue({
//el:"#myVue",
components:{
"myComponent":father
}
}).$mount('#myVue');
</script>
</html>
vue 子組件調用父組件數據
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。