您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容主要讲解“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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。