props
props是什么?
/*
* props是用于子组件接收父组件的数据,可以是简单数组也可以是对象,
* 对象写法可以做一些类型判断,默认值等
* <my-comp :title="header" :body="body"></my-comp>
* Vue.component('my-comp', {
template: `<div>
<h1>{{ title }}</h1>
<p>{{body}}</p>
</div>`,
props:['title','body']
})
* -------------------------
props:{
title:{
default:'i am not header',
type:String,
},
body:String
}
* */
可以直接修改props的值吗?
/*
* 可以修改,但是不应该修改,props是单向数据流,数据是从父组件传递过来的,如果是引用类型的话
* 强行修改造成数据混乱,并且vue还会报警告
* Avoid mutating a prop directly since the value will be overwritten
* whenever the parent component re-renders. Instead,
* use a data or computed property based on the prop's value
*
* 如果想对传递的值修饰展示的话可以在组件的data中定义一个,将props的值赋值即可
* 或者使用计算属性
* */
Vue.component('my-comp', {
template: `<div>
<h1>{{ title }}</h1>
<p>{{body}}</p>
<p>{{person.name}}</p>
<button v-on:click="handleUpdate">
update header
</button>
</div>`,
props:{
title:{
default:'i am not header',
type:String,
},
person:{
type:Object,
default: {}
},
body:String
},
methods: {
handleUpdate(){
console.log(this.title)
this.title='i am updated' //不是引用类型,父组件不会修改
this.person.name='tom' // 父组件的值被修改
}
}
})
组件之间通信?
- props 父---子 //单项数据流
- $refs 父---子 //获取组件实例,可以对子组件进行修改
- $emit 子---父 //事件监听
- $parent 子---父 //子组件获取获取父组件实例如果有的话并且可以修改状态
- $emit和$on 兄---兄 // 事件总线,$emit提交一个事件,并且可以传递参数,$on监听事件名,接收参数
- vuex 全局状态管理 //任何地方都可以获取到数据