Vue中父组件与子组件之间的通信
【摘要】 prop 父组件向子组件传递数据, 单向绑定 $refs 父组件调用子组件里的属性和方法 $emit 子组件向父组件传递消息
新建项目
$ vue create demo
$ cd demo
$ npm run serve
123
1、父组件引用子组件
components/Child.vue
<template>
<h2>子组件&...
prop 父组件向子组件传递数据, 单向绑定
$refs 父组件调用子组件里的属性和方法
$emit 子组件向父组件传递消息
新建项目
$ vue create demo
$ cd demo
$ npm run serve
- 1
- 2
- 3
1、父组件引用子组件
components/Child.vue
<template>
<h2>子组件</h2>
</template>
- 1
- 2
- 3
App.vue
<template>
<div id="app"> <h2>父组件</h2> <!-- 3、使用子组件 --> <Child></Child> </div>
</template>
<script>
// 1、导入子组件
import Child from "@/components/Child.vue";
export default {
name: "app", // 2、注册组件
components: { Child // 键名与变量名相同， 等价于 Child: Child
}
};
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
2、父组件给子组件传值
components/Child.vue
<template> <div> <h2>子组件</h2> <p>{{message}}</p> </div>
</template>
<script>
export default { name: "child", // 子组件属性，用于接收父组件数据, props是单向绑定 props:[ "message" ]
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
App.vue
<template>
<div id="app"> <h2>父组件</h2> <!-- 父组件通过属性给子组件传值 --> <!-- 静态绑定--> <Child message="hello"></Child> <!-- 动态绑定 --> <Child v-bind:message="message"></Child> </div>
</template>
<script>
import Child from "@/components/Child.vue";
export default {
name: "app", data() { return { message: "hello child" };
}, components: { Child
}
};
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
3、父组件操作子组件数据，方法
components/Child.vue
<template> <div> <h2>子组件</h2> <p>{{message}}</p> </div>
</template>
<script>
export default { name: "child", // 子组件属性 data(){ return { message: "", } }, // 子组件方法 methods:{ setMessage(msg){ this.message = msg; } }
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
App.vue
<template>
<div id="app"> <h2>父组件</h2> <!-- 注册子组件引用信息 --> <Child ref="child"></Child> <button @click="setChildMessage">修改子组件数据</button> <button @click="callChildMessage">调用子组件方法</button> </div>
</template>
<script>
import Child from "@/components/Child.vue";
export default {
name: "app", components: { Child
}, methods: { setChildMessage() { this.$refs.child.message = "设置子组件属性" }, callChildMessage(){ this.$refs.child.setMessage("调用子组件方法"); }
}
};
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
$refs 不是响应式的，只在组件渲染完成后才填充
4、子组件给父组件传值
components/Child.vue
<template>
<div> <h2>子组件</h2> <!-- 点击按钮将会给父组件传值 --> <button @click="clickButton">子组件按钮</button> </div>
</template>
<script>
export default {
name: "child", methods: { clickButton() { // 向父组件发送信号 vm.$emit(event, args) this.$emit("clickButton", "子组件的按钮被点击"); }
}
};
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
App.vue
<template>
<div id="app"> <h2>父组件</h2> <!-- 处理子组件的按钮点击事件 --> <Child @clickButton="childClickButton"></Child> </div>
</template>
<script>
import Child from "@/components/Child.vue";
export default {
name: "app", components: { Child
}, methods: { // 接收处理子组件传递过来的数据 childClickButton(message) { console.log(message); }
}
};
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
参考：
文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。
原文链接：pengshiyu.blog.csdn.net/article/details/99101165
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）