1、子组件通过
import Children from './children.vue'引入在父组件
在父组件通过
// 引入子组件
components:{
children: Children
}注册子组件
通过标签的形式来使用
<children :msg="msg" @say="parentSay"></children>
父组件代码
<template> <div class="parent"> 我是父组件 <!--父组件监听子组件触发的say方法,调用自己的parentSay方法--> <!--通过:msg将父组件的数据传递给子组件--> <children :msg="msg" @say="parentSay"></children> </div> </template> <script> import Children from './children.vue' export default { data () { return { msg: 'hello, children' } }, methods: { // 参数就是子组件传递出来的数据 parentSay(msg){ console.log(msg) // hello, parent } }, // 引入子组件 components:{ children: Children } } </script>
子组件代码
<template> <div class="hello"> <div class="children" @click="say"> 我是子组件 <div> 父组件对我说:{{msg}} </div> </div> </div> </template> <script> export default { //父组件通过props属性传递进来的数据 props: { msg: { type: String, default: () => { return '' } } }, data () { return { childrenSay: 'hello, parent' } }, methods: { // 子组件通过emit方法触发父组件中定义好的函数,从而将子组件中的数据传递给父组件 say(){ this.$emit('say' , this.childrenSay); } } } </script>
效果
![](https://img2020.cnblogs.com/blog/1895482/202008/1895482-20200820203455927-1176699933.png)