先上代码:
<template>
<div>
<button @click="getParams">子组件属性</button>
<com1 ref="child" @parentNotic="parentNotic" :parenParamsTest="parenParams"></com1>
</div>
</template>
<script>
export default {
name: "parameterPassing",
data() {
return {
parenParams: '少林张三丰'
}
},
components:{
'com1':{
template:'<div> {{parenParamsTest}}----{{name}} </br> <button @click="parentNotic">点击父组件会执行一个方法</button> </div>',
props:['parenParamsTest'],
data () {
return {
name: '子组件名称',
val: '父组件调用专用参数'
}
},
methods: {
parentNotic() {
this.$emit("parentNotic", {'name': this.name,'val': this.val})
}
}
}
},
methods:{
getParams() {
var name = this.$refs.child.name;
var val = this.$refs.child.val;
alert(name)
alert(val)
},
parentNotic(data) {
console.log(data)
}
}
}
</script>
<style scoped>
</style>
父组件调用子组件属性:
定义按钮:
<button @click="getParams">子组件属性</button>
声明子组件
components:{
'com1':{
template:'<div> {{parenParamsTest}}----{{name}} </br> <button @click="parentNotic">点击父组件会执行一个方法</button> </div>',
props:['parenParamsTest'],
data () {
return {
name: '子组件名称',
val: '父组件调用专用参数'
}
},
methods: {
parentNotic() {
this.$emit("parentNotic", {'name': this.name,'val': this.val})
}
}
}
}
在父组件中引入子组件:
<com1 ref="child" @parentNotic="parentNotic" :parenParamsTest="parenParams"></com1>
按钮的点击事件:
getParams() {
var name = this.$refs.child.name;
var val = this.$refs.child.val;
alert(name)
alert(val)
}
这里使用
this.$refs.child.name 获取子组件的name属性
this.$refs.child.val 获取父组件的val属性
子组件注册的引用为child,所以用this.$refs.child来调用子组件属性。
父组件往子组件传递参数:
父组件定义属性 parenParams
data() {
return {
parenParams: '少林张三丰'
}
}
往子组件传递: :parenParamsTest="parenParams"
<com1 ref="child" @parentNotic="parentNotic" :parenParamsTest="parenParams"></com1>
子组件接收: props:['parenParamsTest']
子组件使用: {{parenParamsTest}}
子组件传参并触发父组件方法:
子组件声明方法:
parentNotic() {
this.$emit("parentNotic", {'name': this.name,'val': this.val})
}
声明this.$emit所触发的父组件的方法: @parentNotic="parentNotic"
父组件方法:
parentNotic(data) {
console.log(data)
}