vue从入门到精通之基础篇（二）组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013205165/article/details/91790336

(1).局部组件的使用

​ 渲染组件-父使用子组件

• 1: 创建子组件(对象)
  • var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }
• 2: 在父组件中声明,根属性components:{ 组件名:组件对象 }
• 3: 在父组件要用的地方使用 <组件名></组件名>
  • 在不同框架中,有的不支持大写字母，用的时候
    • 组件名 MyHeader
    • 使用 my-header
• 总结: 有父，声子，挂子，用子

(2).注册全局组件

• 应用场景: 多出使用的公共性功能组件，就可以注册成全局组件,减少冗余代码
• 全局API Vue.component('组件名',组件对象);

(3).组件深入

---

父子组件传值(父传子)

• 1:父用子的时候通过属性Prop传递
• 2:子要声明props:[‘属性名’] 来接收
• 3:收到就是自己的了，随便你用
  • 在template中 直接用
  • 在js中 this.属性名 用
• 总结:父传,子声明,就是子的了
• 小补充: 常量传递直接用，变量传递加冒号

总结父传子

• 父用子 先声子,挂子,用子
• 父传子 父传子(属性),子声明(收),子直接用(就是自己的一样)

子传父

• 1.子要绑定原生事件，在原生事件函数中通过this.$emit(‘自定义的事件名’,arg1);触发父组件中子组件自定义的事件名
• 2.父组件中的子组件v-bind:自定义事件的名字 = 'fn'绑定自定义的事件
• 3.父组件 就可以触发fn的函数 数据就可以从子组件中传过来了