【Vue】父子组件值及方法传递使用

父子组件值、方法引用

1、值

1.1 父组件获取子组件值

父组件

<template><div><button @click="getChildValue">click</button><child ref="child"></child></div>
</template><script>
import Child from './Child.vue'export default {name: "Parent",components: {Child},data() {return {}},methods: {getChildValue() {console.log(this.$refs.child.msg1)}}
}
</script>

子组件

<template><div id="child"><div>{{ msg1 }}</div></div>
</template><script>
export default {name: "Child",data() {return {msg1: "i am child"};},methods: {}
}
</script>

测试结果在控制台查看

1.2 子组件获取父组件值

方式1：

props: ['parentName']

方式2：

props: {parentName: String //这样可以指定传入的类型，如果类型不对，会警告
}

方式3：

props: {msgVal: {type: String, //指定传入的类型//type 也可以是一个自定义构造器函数，使用 instanceof 检测。default: '' //这样可以指定默认的值}
}

注意：props 会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，
诸如 data、computed 或 methods 等实例属性还无法使用

父组件

<template><div><child ref="child" :parentName="parentName"></child></div>
</template><script>
import Child from './Child.vue'export default {name: "Parent",components: {Child},data() {return {parentName:'i am parent'}},methods: {}
}
</script>

子组件

<template><div id="child"><button @click="getParentsValue">获取父组件值</button></div>
</template><script>
export default {name: "Child",props:['parentName'],data() {return {};},methods: {getParentsValue(){console.log(this.parentName)}}
}
</script>

2、方法

2.1 父组件调用子组件方法

父组件

<template><div><button @click="clickChildMethodNoParams">调用子组件方法 无参数 </button><button @click="clickChildMethodParams">调用子组件方法 有参数 </button><child ref="child" ></child></div>
</template><script>
import Child from './Child.vue'
export default {name: "Parent",components: {Child},data() {return {}},methods: {clickChildMethodNoParams(){this.$refs.child.childMethod();},clickChildMethodParams(){this.$refs.child.childMethodAddParams(' i am parent ');}}
}
</script>

子组件

<template><div id="child"><p> this is child compoents </p></div>
</template><script>
export default {name: "Child",data() {return {};},methods: {childMethod(){console.log('i am child method')},childMethodAddParams(param){console.log('i am child method ',param)}}
}
</script>

2.2 子组件调用父组件方法

父组件

<template><div><child ref="child"@clickChildMethodNoParams="clickChildMethodNoParams"@clickChildMethodParams="clickChildMethodParams"></child></div>
</template><script>
import Child from './Child.vue'export default {name: "Parent",components: {Child},data() {return {}},methods: {clickChildMethodNoParams(){console.log('i am parent')},clickChildMethodParams(params){console.log('i am parent '+ params)}}
}
</script>

子组件

<template><div id="child"><button @click="childParentMethodNoParams">调用父组件方法 无参数 </button><button @click="childParentMethodParams">调用父组件方法 有参数 </button><p> this is child compoents </p></div>
</template><script>
export default {name: "Child",data() {return {};},methods: {childParentMethodNoParams(){this.$emit('clickChildMethodNoParams');},childParentMethodParams(){this.$emit('clickChildMethodParams','hello i am child ');}}
}
</script>