vue子组件传给父组件,vue子组件向父组件传值的三种方式
本文主要介绍vue子组件如何使用父组件传递的值，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
子组件通过使用父组件传递的值来调用父组件的数据。
子组件使用父组件传过来的值
父组件
alarm statistics:roless . sync= role /alarm statistics
从导入alarmstatistics。/alarm statistics . vue ；
组件：{
报警统计，
},
子组件
道具：[无角色]，
data() {
返回{
角色：this.roless，
},
已安装(){
if(this.role==3){
this . charty= 9.5% ；
}否则{
this . charty= 18% ；
}
},
如果使用父组件接口返回的值，直接在html中使用。
道具：[infoDatac]，
里
v-for=(item，i) in infoDatac.notice.admitted
:key=A i
Div申请号：{{ item.applyCode }}/div
div的使用时间：{{ item.useTime }}/div
span{{ item.title }}/span
/李
vue子组件调用父组件数据
！声明文档类型
超文本标记语言
头
meta charset=utf-8 /
标题/标题
script src= js/vue . js type= text/JavaScript charset= utf-8 /script
/头
身体
div class= id=myVue
我的组件
/我的组件
/div
！-子组件-
模板id=子级
div id=
Div @click=changedata 子组件：{{data}}/div
/div
/模板
！-父组件-
模板id=父亲
差异
my component-child v-bind:data= str /my component-child
/div
/模板
/body
脚本类型=text/javascript 字符集=utf-8
/*父组件中的数据字符串，
*将父组件的数据绑定到子组件的属性数据。
*然后可以通过子组件中的props接收，
*这样，可以在子组件中使用变量this.data1来访问父组件的str1对应的值。
*/
//当点击子组件时，触发子组件的changedata方法，子组件通过this.data=修改父组件的值；父节点的str值被更改。
//通过这个访问父组件的方法fn()。$parent.fn()。
var child={
道具：[数据]，
模板：“#child”，
数据：函数(){
返回{
字符串：“我是子组件数据”
}
},
方法：{
changedata:函数(){
This.data=父组件值被子组件修改；
这个。$ parent . fn()；
}
}
}
/*父组件*/
var父亲={
模板：“#父亲”，
数据：函数(){
返回{
Str:我是父组件数据
}
},
方法：{
fn:函数(){
Alert(“我是父组件方法”)
}
},
组件：{
mycomponentChild :子级
}
}
vm=新Vue({
//El:“# my vue”，
组件：{
“我的组件”:父亲
}
}).$ mount( # my vue )；
/脚本
/html
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。