第二章:书写Vue组件
第一步:在sa-view目中新建模块ddusers,新建一个vue组件ddusers-add.vue,注意引入其他vue组件的方式,不再是import,而是使用httpVueLoader来进行引入。<template><div><el-input v-model="param.name" placeholder="姓名"></el-input><
·
第一步:在sa-view目中新建模块ddusers,新建一个vue组件ddusers-add.vue,注意引入其他vue组件的方式,不再是import,而是使用httpVueLoader来进行引入。
<template>
<div>
<el-input v-model="param.name" placeholder="姓名"></el-input>
<el-input v-model="param.dept" placeholder="部门"></el-input>
<sa-item type="text" name="普通参数" v-model="param.name" br></sa-item>
<el-button type="primary" @click="add()" round>提交</el-button>
</div>
</template>
<script>
//这里要使用module.exports,而不是export default
module.exports = {
name: "ddusers-add",
components: {
//无论是在html还是vue组件中,引入子组件都要使用httpVueLoader的形式。
"sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
},
//这里要使用函数的方式,而不是JSON
data: function () {
return {
param: {
name: "",
dept: "",
}
}
},
methods: {
add: function () {
sa.alert(JSON.stringify(this.param))
}
}
}
</script>
<style scoped>
</style>
第二步:添加导航栏,找到sa-frame目录下的menu-list.js文件
添加一栏导航,将我们第一步写好的组件地址配置进去
访问localhost:8080/index.html或者直接用浏览器访问index.html页面,可以看到我们的组件已经成功添加到导航栏并访问成功了。
更多推荐
已为社区贡献28条内容
所有评论(0)