vue2.0在页面中自定义组件模块,以及页面与组件之间的数据传递
1,在初始文件index.html中加入要引入的模块,注意驼峰命名的方式(我就是没写成驼峰,报错)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>my-first-vue-project</title> </head> <body> <div id="app"> <com-a></com-a> </div> <!-- built files will be auto injected --> </body> </html>
2,在mian.js可以看见标签<com-a>如何引入
import Vue from 'vue' // import comA from './components/a' import comA from './components/a' new Vue({ el: '#app', components: { comA }, template: '<comA/>' })
3,a.vue(注意,我在a模块加了标签<com-b>,不是html标签,其实就是vue引入新的子组件)
分3步:
- 在父页面(a.vue)上引入写好的组件
import comB from './b' //comB为组件的name
- 注册组件
components:{ //注册组件
comB
},
- 驼峰命名的方式
<com-b> </com-b>
<template> <div> I am a 'a' component <com-b></com-b> </div> </template> <script> import comB from './b' export default { components: {comB} } </script>
页面如何传数据给组件
页面:
<com-a :prop-data="0" > </com-a>
// prop-data 传到组件的数据
组件:
export default {
components: {comB},
props: ['propData']
}
可以用this.propData获取到props(页面传过来的值) 为0