子组件像父组件传递数据
1.需要触发按钮或者create事件
child.vue子组件
<template>
<div>
<div :data="treeDataItem" ref="treeData">子组件</div>
<button @click="submit">触发</button>
</div>
</template>
<script>
//vue3x
//emits: ['getTreeData'],
methods: {
submit(){
//this.$emit("getTreeData",this.$refs.treeData.getCheckNodes());
this.$emit("getTreeData",this.treeDataItem);
}
getCheckNodes(){
}
}
</script>
父组件
<template>
<Child @getTreeData="'testData($even)'">父组件</Child>
</template>
<script>
testData(data){
//子组件的数据
console.log(data)
}
</script>
2.不需要在子组件中触发事件(如点击按钮,create事件等等)
Child.vue子组件
<template>
<div>
<div :data="treeDataItem" ref="treeData">子组件</div>
<button @click="submit">触发</button>
</div>
</template>
<script>
getData(){
this.$emit("getTreeData",this.$refs.treeData.getCheckNodes());
}
getCheckNodes(){
}
</script>
父组件
<template>
<Child ref="authTree">父组件</Child>
</template>
<script>
//调用
console.log(this.$refs.outhTree.getData())
</script>
父组件像子组件传递数据
父组件
<template>
<Child :dataItem="dataItemData" :msg="msgData" :list="listData">父组件</Child>
</template>
<script>
data(){
dataItemData:{name:"1",des:"22"},
msgData:"111",
listData:[{name:"1",des:"22"}],
}
</script>
Child.vue组件
父组件像子组件传递数据,要在子组件中props获取
<template>
<div>
<div>{{dataItem.name}}</div>
<div>{{msg}}</div>
<div v-for="(item,index) in list" :key="index">{{item.name}}</div>
</div>
</template>
<script>
props:{
dataItem:{
type:Object,
default:{
}
},
msg:{
type:String,
//default:{
//msg:'111'
//}
},
list:{
type:Array,
//注意要用这种箭头方式
default:()=>{
}
//或者
//default:{
// return ({
// })
//}
}
}
</script>