VUE6.组件通信父组件向子组件传值
Posted totoro-cat
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE6.组件通信父组件向子组件传值相关的知识,希望对你有一定的参考价值。
1. 前提&知识点
1./components/Father.vue 是父组件, Son.vue 是子组件
2.父组件像子组件通信
props
2.组件通信
1. 新增一个路由入口 /father(省略)
2. components -> Father.vue 添加一组数据
export default { name: "Father", data() { return { father_list: ["第一章", "第二章", "第三章", "第四章"] }; } };
3.父组件中调用,注册,引用子组件
import Son from "./Son.vue";
4. 注册组件
components: { "son": Son }
5. 引用组件,绑定一个自定义的key值
<son :father_list="father_list"></son>
6. 子组件通过props接收父组件传过来的值
export default { data () { name: ‘Son‘ return { // list: [‘第一章‘, ‘第二章‘, ‘第三章‘, ‘第四章‘] } }, props: [‘father_list‘] }
7. 访问/father 路由
3. 完整代码
Father.vue
<template> <div> <h2>This is Father</h2> <son :father_list="father_list"></son> </div> </template> <script> import Son from "./Son.vue"; export default { name: "Father", data() { return { father_list: ["第一章", "第二章", "第三章", "第四章"] }; }, components: { "son": Son } }; </script>
Son.vue
<template> <div> <ul> <li v-for="item in father_list" :key=‘item‘>{{item}}</li> </ul> </div> </template> <script> export default { data () { name: ‘Son‘ return { // list: [‘第一章‘, ‘第二章‘, ‘第三章‘, ‘第四章‘] } }, props: [‘father_list‘] } </script>
以上是关于VUE6.组件通信父组件向子组件传值的主要内容,如果未能解决你的问题,请参考以下文章