vue组件基础
组件
mvvm 数据驱动 组件化
组件:网页上组成部分(预定义组件、自定义组件)
组件语法:
组件也是Vue的实例(new Vue 他有的属性 组件都有)
// 全局组件(挂载到Vue上,可以在任意组件以及实例的模板中使用)
Vue.component(组件名,{
template:`
<div>
xx
xxx
</div>
`,
data(){
return {
}
},
methods:{},
watch:{},
computed:{}
})
/*
注意:
1,template 必须 有且只有一个根组件(除非使用v-if 或者 v-else-if才能出现多个)
2,data属性 必须是一个方法 返回这个对象 组件会被复用(形成自己作用域,每一次都会重新开辟空间 ,多次使用不会互相影响)
3,组件有 自己作用域 属性。方法等 都只能在自己内部使用
*/
// 局部组件(挂载到其他的组件或者实例上,只能在挂载的组件中使用)
// 定义组件组件
const SubTitle = {
template:`
<div>
我是一个局部组件
{{ title }}
</div>
`,
data(){
return {
title:"我是局部组件数据"
}
}
}
// 其他组件中注册
Vue.component("Home",{
template:`
<div>
<sub-title></sub-title>
</div>
`,
components:{
SubTitle
}
})
/*
局部组件 是在 其他组件 的components属性中注册
注意只能在 组件的组件的template使用,无法在外部使用
*/
组件关系
- 由于组件 嵌套使用 形成 父子、兄弟关系
组件通信
父–子 props通信
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<common-head></common-head>
</div>
<script src="./vue.js"></script>
<script>
//定义局部组件
const SubTitle = {
template:`
<div>
我是局部组件
{{ title1 }}
{{ title2 }}
{{ title }}
</div>
`,
props:["title1","title2"],
//接收父组件传的属性
data(){
return {
title:"我是局部组件内部数据"
}
}
}
//定义全局组件
const CommonHead={
template:`
<div>
<h1>我是公共的头部</h1>
<button @click="changeMsg">按钮</button>
{{msg}}
<h2>嘿嘿嘿</h2>
<sub-title title1="我是父传子1" title2="我是父传子2"></sub-title>
</div>
`,//要传子的属性写在标签中
data(){
return{
msg:"我是全局组件的数据"
}
},
methods:{
changeMsg(){
this.msg="数据改变了"
}
},
components:{
SubTitle
}
}
Vue.component("CommonHead",CommonHead)
const vm = new Vue({
el:'#app'
})
</script>
</body>
</html>
//通过props
/*
子组件中 定义props属性 props是一个数组 数组中定义待接收的 属性列表
props待接收列表会 渲染到 组件实例的 属性上 跟data中的数据是同级别的
注意:
props key不要和 实例中已经存在属性重名(如data中的属性以及计算属性)
*/
const Child = {
template:`
<div>
{{ title }}
{{ title2 }}
</div>
`,
props:['title','title2']
}
// 传递
const Father = {
template: `
<div>
<child title="父组件的静态数据" :title2="msg"></child>
</div>
`,
data(){
return {
msg:"父组件中动态数据"
}
}
}
// props验证
{
props:{
a:String, // 只验证 类型,可以简写,直接写类型的值
b:[String,Number], // 只验证类型,类型有多个 扔到数组中
c:{
type:String,
required:true
},
d:{
type: Number,
default:10
},
e:{
type:Array, // 如果类型是数组或者对象,默认值应该是函数返回默认值
default: ()=> [1,2,3,4]
}
}
}
子向父通信 自定义事件
子组件中
this.$emit("事件",参数); //触发子组件的一个自定义的事件
在父组件中
<child @自定义事件="fn"></child>
{
methods:{
fn(参数){
// 触发
}
}
}
兄弟组件通信 自定义事件 事件中心总线 (event bus)
利用一个第三方的实例 bus(event bus)
bus 触发自定义事件
由bus来监听这个事件
实例.$on(事件,回调)
const bus = new Vue();
bus.$emit("事件",参数)
bus.$on("事件",fn)
一下三种 不太重要
ref组件通信 (记住)
父组件中
<child ref="child"/>
this.$refs.child 获取子组件的实例
this.$refs.child.xx直接获取子组件data中的数据
this.$refs.child.xx() 直接调用子组件的方法
$parent $children
子组件中
this.$parent直接拿到父组件的实例
父组件中
this.$children 拿到的是 父组件中的所有子组件(数组)
provide inject
父组件
{
provide:{
a:10,
b:20
},
template:'',
data,
xx
}
子组件中
{
inject:['a','b'] // 自动灌入到子组件上作为属性 所以可以直接通过this.a this.b拿到
}