vue子组件如何使用父组件传过来的值
更新时间：2022年04月08日 11:29:09 作者：我是小路路呀
这篇文章主要介绍了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>vue子组件调用父组件数据
<!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>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Element中el-input密码输入框浏览器自动填充账号密码问题的解决方法
自己写了一个管理系统,登录成功之后,浏览器提示我保存账号密码,每次登录时就会自动回填记住的账号密码,方便用户快速登录,下面这篇文章主要给大家介绍了关于Element中el-input密码输入框浏览器自动填充账号密码问题的解决方法,需要的朋友可以参考下2022-09-09
vue+element-ui监听滚动实现锚点定位方式(双向),锚点问题
这篇文章主要介绍了vue+element-ui监听滚动实现锚点定位方式(双向),锚点问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
Vue 2源码解析HTMLParserOptions.start函数方法
这篇文章主要为大家介绍了Vue 2源码解析HTMLParserOptions.start函数方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了vue 集成 sweetalert2 提示组件的问题，本文通过项目案例实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-11-11
这篇文章主要介绍了vue使用keep-alive保持滚动条位置的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue如何使用bable将es6转译为es5问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了vue的代理配置pathRewrite重写不生效问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了Vue el-table实现右键菜单功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了基于Vue实现timepicker效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
在vue中使用export default导出的class类方式
这篇文章主要介绍了在vue中使用export default导出的class类方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论