本篇内容主要讲解“Vue子组件怎么使用父组件传过来的值”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue子组件怎么使用父组件传过来的值”吧!子组件使用父组件传过来的值父组件<alarms
本篇内容主要讲解“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"> //当点击子组件，触发子组件的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子组件怎么使用父组件传过来的值”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
--结束END--
本文标题: vue子组件怎么使用父组件传过来的值
本文链接: https://www.lsjlt.com/news/326595.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0