溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“vue子組件怎么使用父組件傳過來的值”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue子組件怎么使用父組件傳過來的值”吧!
<alarmstatistics :roless.sync="role"></alarmstatistics>
import alarmstatistics from "./alarmstatistics.vue";
components: {
alarmstatistics,
}, props: ["roless"],
data() {
return {
role:this.roless,
},
mounted() {
if(this.role==3){
this.chartY = "9.5%";
}else{
this.chartY = "18%";
}
},如果是使用父組件接口返回來的值，在html中直接使用
props: ["infoDatac"],
<li
v-for="(item,i) in infoDatac.notice.admitted"
:key="'A'+ i"
>
<div>申請單號：{{ item.applyCode }}</div>
<div>使用時間：{{ item.useTime }}</div>
<span>{{ item.title }}</span>
</li><!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子組件怎么使用父組件傳過來的值”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
