vue中的组件以及数据传递

作者:日期:2018-01-21 12:11:15 点击:296

1-组件化开发:

我们可以很直观的将一个复杂的页面分割成若干个独立组件,每个组件包含自己的逻辑和样式,再将这些独立组件组合完成一个复杂的页面。这样既减少了逻辑复杂度,又实现了代码的重用。页面是组件的容器,组件自由组合形成完整的页面,当不需要某个组件时,或想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。

2-组件化开发的好处

  • 提高开发效率
  • 方便重复使用
  • 便于协同开发
  • 更容易被管理和维护

3-VUE中组件的特点

vue中一个自定义标签(不是W3C规定的标准标签如div、p等),vue就会把他看成一个组件
不能光写一个自定义的标签而不赋予意义

4-组件分类

  • 页面级组件:
    1)一个页面是一个组件
    2)将可复用的部分抽离出来 基础组件

  • 全局组件:声明一次 可以在任何地方使用

  • 局部组件:必须告诉这个组件属于谁
    一般写插件的时候或者很多人都要用,使用全局组件的多一些。
//1.组件名不要带有大写,多个单词用-连接
//2.只要组件名和定义的名字相同时可以的(首字母可以大写,中间不要有大写)
//3.html采用短横线隔开命名法 JS中转驼峰也是可以的

定义全局组件

Vue.component('my-handsome',{ //一个对象可以看成一个组件
//在自己定义的模板中取自己data返回的数据
template:'<div>{{msg}}</div>',
//组件中数据必须是函数类型,返回一个实例作为组件的数据
data(){
return {msg:'我很英俊'}
}
})
let vm=new Vue({
el:'#app',
data:{
........
}
})

定义局部组件

局部组件使用的三部曲:
1.创建这个组件
2.注册这个组件
3.使用这个组件

组件是相互独立的,不能直接跨作用域(子组件不能直接使用父组件的data)
vm的实例也是一个组件,自定义组件中也拥有声明周期函数

//如果组件共用了数据,会导致同时刷新,但是组件应该是独立性的
//为什么会独立呢?
//因为data是一个函数,return 出去是一个新对象,新对象那就是一个独立的作用域。
// 所以组件中的data要是一个函数,函数是一个作用域,return 出去一个新对象,
// 这样就与其他组件的data不冲突是独立的了
 
//组件理论上是可以无限嵌套的,因为vm本身就是一个组件,他里面也自定义了组件,并且自定义的组件也是一个对象,
//并且和其父级一样拥有各种属性,所以其自己又可以作为“父组件”,他里面也可以放组件
 
let obj={
school:'zfpx'
};
//1.创建组件
let component1={
//这里的引号问题 把里面的单引号转义一下,或者使用ES6的模板字符串
template:'<div @click="school='home'">组件一 {{school}}</div>',
data(){
return obj;
}
};
let component2={
template:'<div @click="fn">组件二 {{school}}</div>',
data(){
return obj;
},
methods:{
fn(){
//这里的this不再指向其父级vm,而是指向自己的组件
console.log(this)
}
}
}
 
 
let vm=new Vue({
el:'#app',
//2.注册组件
components:{
component1:component1, //在ES6中名字一样可以只写一个,如component2那样
component2,
},
data:{
a:1
}
})

组件嵌套

1.如果要在一个组件中使用另一个组件,先要保证使用的组件得是真实存在的,
2.在需要引用这个组件的实例通过components注册这个组件
3.组件需要在父级的模板中通过标签的形式引入
 
//son中要用到grandson,所以得把grandson声明到son上面
let grandson={
template:'<div>grandson</div>'
};
 
//parent中要用到儿子,所以得先把son声明到parent上面
let son={
template:'<div>son <grandson></grandson></div>',
components:{
grandson
}
};
let parent={
template:'<div>parent <son></son></div>',
components:{
son,
}
};
 
 
let vm=new Vue({
el:'#app',
template:'<parent></parent>',
components:{
parent
},
data:{
a:1
}
})

父子组件数据传递(父传子)

组件的传递:
父亲 -> 儿子 -> 孙子 (属性传递)
孙子 -> 儿子 -> 父亲 (事件传递)

html结构

<div id="app">
父亲:{{money}}
<!--当前组件的属性(m)=父级的值(1)-->
<!--<child m="1"></child>-->
 
<!--给儿子加了一个m属性,属性对应的数据是属于父亲的,但是直接写m="money",money就成了字符串了
但是我们后面的money是一个变量,所以我们就得用动态绑定:m="money"的格式了
如:
a='1' =>得到的1是一个字符串 :a="1" =>得到的1是一个数字
a="true" =>得到的是一个字符串"true" :a="true" =>得到的是一个布尔
 
如果自定的属性是有短横线连接的写法时 m-m的话,下面用的话得用驼峰mM
-->
<child :m="money"></child>
</div>

父传子流程:
- 1.首先子组件嵌套在父组件内(结构)
- 2.在html中给子组件的标签中 加上自定义属性 并赋值,这个值就是要在父组件中得到的数据,既然是数据,肯定要是变量,所以我们要给
这个属性前面加上:,叫做动态绑定
- 3.在JS中子组件里,props接收(获取)在上一步中子组件中定义的属性值
- 4.然后在子组件定义的模板中就可以用获取到的属性值了

//这个实例就是一个组件,parent
let vm=new Vue({
el:'#app',
components:{
child:{
//会在当前子组件上声明一个m属性,值是父亲的。(儿子通过props获取到父亲的m属性值)相当于 this.m=100
//如果props是一个数组,他不能校验里面获取到的值是什么类型,把其变成一个对象,里面有几个方法如下:
//props:['m','a'],
props:{
//校验时不能阻断代码的执行,只是警告而已
m:{ //校验属性的类型,如果不带:,得到的肯定是字符串类型,只有:m="1"才是数字类型1,:m="true"才是布尔类型
type:[String,Boolean,Function,Object,Array,Number],
//如果什么都不传,会调用default,要给一个默认值,否则就是false了
default:0,
//此属性是必须传递的意思,但不能与default同用
required:true,
//自定义校验器 第一个参数是当前传递的值,返回true表示通过,false表示不通过
validator(val){
return val>300
}
}
},
 
data(){
return {n:5} //有了上面的props中的m了,就不能再让自己data(包括methods等其他对象中)中有m了,会冲突
},
 
 
template:'<div>儿子:{{m}} {{n}}</div>',
//如果想在child中取的值名跟parent保持一致,我们可以用computed属性;但是这样很麻烦,直接在child上设置属性的时候
//设置成跟parent一样的名字就好了
// computed:{
// money(){return this.m}
// },
}
},
data:{
money:400
}
})

父子组件数据传递(子传父)

父亲绑定一些事件,儿子触发这个事件,将参数传递过去 、
单项数据流:(儿子不能改爸爸的数据,告诉爸爸让他改,父亲数据刷新后,儿子就刷新了)

html结构

<div id="app">
父亲:{{money}}
<!--child.$on('child-msg',things) 相当于订阅-->
<child :m="money" @child-msg="things"></child>
 
</div>
 

子传父流程:
- 1.首先在父可以传子的基础上,给child一个自定义事件,并且这个自定义事件是父亲的方法

  • 2.在子组件的methods中定义一个儿子的方法,并且这个方法是要传递(发射)给上一步儿子的自定义方法的,第一个参数是
    child上自定义的事件名,第二个参数是要传递的值
  • 3.于是当子组件中的方法触发(点击、双击等等)时,父亲的方法就收到了儿子发射的方法中传递的值,然后更新自己的数据即可。
//这个实例就是一个组件,parent
let vm=new Vue({
el:'#app',
data:{
money:400
},
methods:{
//相当于发布订阅的on
things(val){
this.money=val;
}
},
components:{
child:{
props:['m'],
template:'<div>儿子:{{m}} <button @dblclick="getMoney()">多要钱</button></div>',
methods:{
getMoney(){
//触发自己的自定义事件,让父亲的方法执行 相当于发布
this.$emit('child-msg',800)
}
},
 
}
},
 
})

上一篇: 浅读vue的生命周期

下一篇: vue开发中router路由详解