标签：第三章 component 绑定 for http export 通过 png efault
1./components/Father.vue 是父组件， Son.vue 是子组件
2.父组件像子组件通信
props
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 路由
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>
标签：第三章 component 绑定 for http export 通过 png efault
原文地址：https://www.cnblogs.com/totoro-cat/p/13049549.html
