注意:这里的需求可以是随意的,按照自己的需求来。
src/test/components/test.vue
这里按照需求,先绘制出这个模板,目前所有数据都是静态的。
<template>
<div>
<!-- 第一行title -->
<h2>我是aolyu</h2>
<!-- 第二行按钮 -->
<van-button color="red">我是按钮</van-button>
<br />
<!-- 第三行图片 -->
<img width="100px" height="100px" src="https://img-blog.csdnimg.cn/20200721214932949.png" />
</div>
</template>
<script>
import { Button } from 'vant'; // 引入vant的Button组件
export default {
components: {
[Button.name]: Button,
},
}
</script>
src/test/main.vue
和导入vant组件一样,我们只需要import
到页面即可。
<template>
<div>
<test />
</div>
</template>
<script>
import Test from './components/test.vue'; // 导入自己编辑好的组件
export default { // 应用到页面
components: {
Test,
},
}
</script>
src/test/components/test.vue
最关键的地方:设置props
属性,并使用v-bind
将属性动态绑定到组件中。
<template>
<div>
<!-- 第一行title -->
<h2>{{ titleText }}</h2>
<!-- 第二行按钮 -->
<van-button :color="btnColor">{{ btnText }}</van-button>
<br />
<!-- 第三行图片 -->
<img width="100px" height="100px" :src="imgSrc" />
</div>
</template>
<script>
import { Button } from 'vant';
export default {
// 这里是重点,定义props属性,可多个
props: ['titleText', 'btnColor', 'btnText', 'imgSrc'],
components: {
[Button.name]: Button,
},
}
</script>
src/test/main.vue
使用组件并向其传递参数。
<template>
<div>
<!-- 向其传递定义的属性值 -->
<test titleText="I'm a title" btnColor="yellowgreen" btnText="I'm a btn" imgSrc="https://img-blog.csdnimg.cn/20200721214932949.png" />
</div>
</template>
<script>
import Test from './components/test.vue';
export default {
components: {
Test,
},
}
</script>
test.vue
文件中定义的数据被称作组件,但是它也有引用vant
库中的Button
组件,它在test.vue
中被再次封装,并且能够在main.vue
中被调用。那么我们再想一想,是不是main.vue
也可以被当作组件被其他文件所引用呢?你可以试试哦!!!本文地址:https://blog.csdn.net/weixin_44901846/article/details/107499063
如对本文有疑问, 点击进行留言回复!!
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
解决vue动态路由异步加载import组件,加载不到module的问题
解决vue的router组件component在import时不能使用变量问题
Vue中的this.$options.data()和this.$data用法说明
GBase 8a MPP Cluster使用Ceph做存储计算分离
网友评论