vue第三天

组件(Component)

-组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

-全局组件
vue.compontent("组件名",配置) -> vue.compontent("组con-pcom",{})
-局部组件
let Allcompont= {}

new Vue({
   compontents:{
     Allcompont:Allcompont  //当组件和组件名称相同:也可以直接Allcompont
   }
})

-data 必须是函数,返回一个对象

-在 Vue 中,父子组件的关系可以总结为props down, events up

子组件要显式地用[props 选项](https://cn.vuejs.org/v2/api/#props)声明它期待获得的数据:

<colgroup><col style="width: 576px;"></colgroup>
Vue.component('child', {
// 声明 props
props: ['message'],
// 就像 data 一样,prop 可以用在模板内
// 同样也可以在 vm 实例中像“this.message”这样使用
template: '<span>{{ message }}</span>'
})

|

单向数据流prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态

单向数据流,prop 是单向绑定的,当父组件的属性变化时,将传导给子组件,但是不会反过来,每次父组件更新时,子组件的所有prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop

子组件要传递数据到父组件,通过自定义事件

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 10,944评论 0 32
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,696评论 0 6
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,474评论 0 29
  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 13,180评论 0 13
  • 此文基于官方文档,里面部分例子有改动,加上了一些自己的理解 什么是组件? 组件(Component)是 Vue.j...
    陆志均阅读 9,259评论 5 14

友情链接更多精彩内容