一、使用组件步骤(创建、注册、使用)
1.创建组件(注意:组件里面的template还是只能有一个根标签)
Vue.extend({})得到的是一个VueComponent构造函数,由new这个构造函数得到vc对象
2.注册组件
3.使用组件
二、组件嵌套
1.创建root组件,在root下创建x组件和y组件,在x下创建x1组件
三、单文件组件(用这种)
每一个组件单独定义一个.vue的文件
main.js:将vm实例放到这里
四、组件自定义事件
1.子向父传递数据,父绑定,子触发
2.自定义事件event1
绑定方式一:
绑定方式二:
2.在子组件中添加点击事件,然后执行父组件中的自定义事件
五、解绑事件
六、全局事件总线(在父组件mounted里面绑定事件)
父组件:在mounted钩子函数里面绑定事件:this.$bus.$on('事件名', 要执行的方法名)
子组件:给一个按钮,点击后触发事件里面:this.$bus.$emit('事件名',参数),参数个数不限
说明:
就是要构建一个全局的vc对象,专门用来处理绑定事件和触发事件,为了让所有的组件都能访问到,所以要将这个全局事件总线vc对象赋值给Vue原型对象的一个属性上,这样,每个vc对象都能用 vc.属性 来拿到这个全局vc对象了,再用来处理绑定和触发事件
触发事件:
绑定事件:
重要:因为vm实例也有$on和$emit方法,所以可以在vm刚好创建出来的时候,将vm赋值给Vue原型对象的$bus属性上,$bus用来表示全局事件总线
触发事件:
绑定事件: