创建组件
创建组件
Vue.component("组件名称",{template:"<h3>模板</h3>"})组件 的使用
组件的使用就像html标签一样
<组件名称></组件名称>- 注意
- 如果一个组件中渲染多个元素,将多个元素放到一个跟标签,否则会报错
创建符合组建
- 定义
- 只用一个组件调用了其他的组件
- 创建
- 通创建组件一样
组件的生命周期
分别为四个阶段,每个阶段都有对应的函数
- create 初始化操作
- create
- beforCreate
- mount 挂载DOM
- mount
- beforMount
- update 数据更新 操作或逻辑判断
- uodate
- beforUpdate
- destroy 清理工作
- destroy
- beforDestroy
监听属性
watch
组件之间的通信
父子组件通信
// 1. 父组件在调用子组件传值
<child myValue="123"><child>
// 2. 子组件中获得父组件
vue.component("child",{
props:['myValue'] // 生命父组件传递参数
trmplate
})子父组件之间通信
通过实践的方式来完成数据的传输
// 1.在父组件中定一个方法,用于接收子组件通过实践发送的数据
methods:{
getdata(msg){
// msg就是子组件闯过的数据
}
}
// 2. 父组件模板绑定时间处理函数
<child @自定义事件="方法名"></child>
// 3. 在子组件中触发事件,并传递数据
this.$emit("触发事件名",传递数据)组件之间通信($parent;$refs)
// 父组件获得子组件的数据
// 1. 在调用子组件,指定属性ref
<child ref="xxx"></child>
// 2.根据指定名称,找到子组件实例对象
this.$refs.xxx
// 子组件获得父组件的数据
this.$parent.父组件的属性名
// 注意: 只支持在data里的数据事件总线传值
借助于一个公共Vue实例对象,不同的组件可以通过该对象完成事件绑定触发
var bus = new Vue();
bus.$on() // 绑定事件
bus.$emit() // 发送事件
// 示例
// 接收方
bus,$on("函数名",function(msg){
// msg 接收的数据
})
// 发送方
bus.$on("函数名","传递的参数")