我们在进行vue开发时会将公共的部分进行抽象,然后生成一个独立的组件,这个组件可以被其它页面引用,如果希望有交互的动作就设计到了值的传递,或者方法的回调等问题,这一次我们主要来说一下父组件和子组件的交互。
值的传递
子组件,通过定义了prods,然后可以实现从父组件向子组件的传递:
这是自定义的组件:{{myMessage}}
调用父组件的方法
export default {
name: "testComponent",
props: ["myMessage"],
data() {
return {
message: "hello world",
myNum: 37,
myStr: "lind"
};
},
methods: {
childClick() {
console.log("调用childClick");
this.$emit("abcClick", this.myNum, this.myStr);
}
}
};
父组件/页面,直接为这个prods赋值即可,注意如果JS里props名称是小驼峰,在html需要用中线来代替
import testComponent from "@/components/testComponent";
export default {
name: "test-grammer",
props: {
//接收父组件传递过来的参数
},
components: {
testComponent
}
}
方法的传递/回调
在父页面绑定子组件的方法,然后子组件在某个时机去触,这就形成了在子组件里调用父组件的方法,使用了$emit来实现
调用父组件的方法
export default {
name: "testComponent",
methods: {
childClick() {
this.$emit("abcClick", this.myNum, this.myStr);
}
}
};
在父页面中去绑定这个abcClick事件就可以了,当在子组件调用这个childClick事件时,绑定了abcClick的方法将会被一起回调
import testComponent from "@/components/testComponent";
export default {
name: "test-grammer",
methods: {
sayHello(Num, Str) {
console.log("hello world~~" + Num + Str);
}
},
};