版权声明:本文为博主原创文章,未经博主允许不得转载。 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的函数 数据就可以从子组件中传过来了