Loading

高阶函数+组件化开发

1.高阶函数
1.filter函数的使用

const nums= [10,20,111,222,444,40,50]
let newNums = nums.filter(function(n){
    return n<100
})

2..map函数的使用:

let new2Nums = newNums.map(function(n){
	Return n*2
})

3.reduce函数的使用:

let total = new2Nums.reduce(functiion(prevalue,n){
	return prevalue+n
},0)
 
/*
第一次: prevalue 0  n 20
第二次: prevalue 20  n 40
第三次: prevalue 60  n 80
第四次: prevalue 140  n 20
*/

2.组件化开发
1.全局组件:

// 1.创建组件构造对象
const  cpnC = Vue.extend({
	template: `
	 <div>
		<h2>我是标题</h2>
	</div>
	`
})
// 2.注册组件
Vue.component('my-cpn',cpnC)
// 3.使用组件
<my-cpn></my-cpn>

2.局部组件:

// 1.创建组件构造对象
const  cpnC = Vue.extend({
	template: `
	 <div>
		<h2>我是标题</h2>
	</div>
	`
})
// 2.注册组件
//  Vue.component('cpn',cpnC)
// 3.使用组件
<cpn></cpn>
 
2.
        var vm = new Vue({
            el: '#app',
            data: {
			
			},
            methods: {},
		      component: {
			cpn: cpnC
		}
        });

3.组件中的data为啥是个函数:

1..与Vue实例相比,组件要考虑复用,

2.复用时改变组件的值不能影响其他组件的值

3.详情:https://www.cnblogs.com/wangjiachen666/p/9876266.html

4.父子组件通信

posted @ 2020-09-02 23:48  zranguai  阅读(120)  评论(0编辑  收藏  举报