《图解Vue3.0》- 第3节 组件基础实例

时间:2021-6-4 作者:qvyue

组件是vue中最推崇的,也是最强大的功能之一,就是为了提高重用性,减少重复性的开发。在vue中,代码按照templeate、script、style的模块方式拆分。我们创建一个名为Count的的vue组件,看看是怎么使用的。

示例

《图解Vue3.0》- 第3节 组件基础实例

vue组件代码(Count.vue):

初始值是: {{ initCount }} 点击的次数: {{ count }}
export default { props: ['initCount'], data() { return { count: 0 } }, methods: { clickBtn() { this.count++; } } } button { color: red; border: 1px solid #909090; }

调用方式(在App.vue中调用):

Vue logo
import Count from './components/Count.vue';

export default {
  name: 'App',
  components: {
    Count,
  }
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
  • 模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。
  • 初始数据(data): 一个组件的初始数据状态。对于可复用的组件来说,通常是私有的状态。
  • 外部参数(props): 组件之间通过参数来进行数据的传递和共享,默认传递方向是自上而下的,但也可以显示声明为双向绑定。
  • 方法(methods): 一般为组件内部的私有方法。
  • 生命周期钩子函数(lifecycle hooks): 一个组件会触发多个生命周期钩子函数,比如created,destroyed等,在这次钩子函数中,可以封装一些自定义的逻辑。

暂且对组件的认识到此为止,有了一个简单的了解之后,先看看vue提供的一些基础语法,数据绑定,指令,修饰符等。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。