关于VUE组件父子传值问题,通俗易懂
子向父传值:
页面包含子组件< child />:
<template>
<div>
<child v-on:getData ="getmethodData"/> // 子组件
</div>
</template>
<script>
methods: {
getmethodData(data){
console.log(data); // 获取从子组件传递过来的值 123
}
}
</script>
子组件写法:
<template>
........
</template>
<script>
methods: {
goFather(123){
this.$emit('getData',123)
}
}
</script>`
其中子组件v-on绑定如果导致页面报错可能是eslint报错建议更换为@;通俗的解释就是子组件通过$emit方式将getData赋值,然后在父组件中绑定方法来获取这个getData值。
父向子传值:
父组件:
<template>
<Child :data="getData"/> //子组件
</template>
<script>
export default{
data() {
return {
getData: 123,
}
}
}
</script>
子组件:
<template>
.....
</template>
<script>
export default {
props: ['data'] // 获取父组件传递过来的123;
}
</script>
有些时候因为项目自己定义的规则不同,props:[‘data’]获取不到值页面还会报错,建议另一种写法
<script>
export default {
props : {
data: {
type: Object, // 值的类型(对象)
default() {
return {};
},
}
}
}
</script>
当值得类型不是Object的时候 只需要:
<script>
export default {
props : {
data: {
type: String, // 值的类型(字符串)
default: '',
}
}
}
</script>