Vue太难啦!从入门到放弃day04——Vue组件

前言

恰逢周末休息了两天,所以没有更新,各位莫怪,今天周一又开始努力学习Vue了!今天学的是Vue组件,干就完了,奥利给!!


目录

  • 前言
  • 一、Vue组件注册
    • 1.1 全局组件注册语法
    • 1.2 全局组件使用方法:
    • 1.3 组件注册注意事项:
    • 1.4 局部组件注册
  • 二、组件间数据交互
    • 2.1 父组件向子组件传值
      • 2.1.1 子组件内部通过props接收父组件传递过来的值
      • 2.1.2 父组件通过属性将值传递给子组件
      • 2.1.3 props属性命名规则
      • 2.1.4 props可以传递的属性值类型
    • 2.2 子组件向父组件传值
      • 2.2.1 子组件通过自定义事件向父组件传递信息
      • 2.2.2 父组件监听子组件的事件
    • 2.3 非父子组件间传值
  • 三、组件插槽
    • 3.1 组件插槽的作用
    • 3.2 组件插槽基本用法
    • 3.3 具名插槽用法
    • 3.4 作用域插槽用法
  • 总结


一、Vue组件注册

1.1 全局组件注册语法

Vue.component('button-counter', {
	data: function(){
		return {
    		count: 0
		}
	},
	template: '',
	methods: {
		handle: function(){
    		this.count += 2;
		}
	}
})

注意:全局组件注册后,任何vue实例都可以使用

1.2 全局组件使用方法:

<div id="app">
	<button-counter></button-counter>
	<button-counter></button-counter>
	<button-counter></button-counter>
</div>
    
注意:全局组件可多次复用,组件之间相互独立

1.3 组件注册注意事项:

    1. data必须是一个函数
    2. 组件模板内容必须是单个根元素
    3. 组件模板内容可以是模板字符串
    4. 如果使用驼峰式( MyComponent )命名组件,只能在字符串模板中使用
    5. 在普通的标签模板中,必须使用短横线( my-component )的方式使用组件

1.4 局部组件注册

可以在vue实例中的components属性中注册局部组件
局部组件注册后只能在当前注册它的vue实例中使用

<script>
// 定义组件的模板
var Child = {
    template: '
A custom component!
'
} new Vue({ //局部注册组件 components: { // 将只在父模板可用 一定要在实例上注册了才能在html文件中使用 'my-component': Child } }) </script> <div id="app"> <my-component></my-component> </div>

二、组件间数据交互

2.1 父组件向子组件传值

2.1.1 子组件内部通过props接收父组件传递过来的值

Vue.component('menu-item', {
	props: ['title', 'content'],
	data: function() {
		return {
			msg: '子组件本身的数据'
		}
	},
	template: '
{{msg + "----" + title + "-----" + content}}
'
});

2.1.2 父组件通过属性将值传递给子组件

<menu-item title='来自父组件的值'></menu-item>
<menu-item :title='ptitle' content='hello'></menu-item>

2.1.3 props属性命名规则

    在props中使用驼峰形式,模板中需要使用短横线的形式 
    字符串形式的模板中没有这个限制

2.1.4 props可以传递的属性值类型

    字符串 String 
    数值 Number    
    布尔值 Boolean    
    数组 Array 
    对象 Object

2.2 子组件向父组件传值

2.2.1 子组件通过自定义事件向父组件传递信息

注意:子组件用 $emit() 触发事件,$emit() 第一个参数为 自定义的事件名称,第二个参数为需要传递的数据 

<button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>

2.2.2 父组件监听子组件的事件

<div id="app">
	<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
	<menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
</div>

handle: function(val){
	// 扩大字体大小
	this.fontSize += val;
}

2.3 非父子组件间传值

        非父子组件之间传递数据需要借助于事件中心,通过事件中心传递数据
        提供事件中心:var hub = new Vue();
        
        传递数据方:通过一个事件触发hub.$emit(方法名,传递的数据) 
        接收数据方:通过mounted(){} 钩子中 触发hub.$on()方法名
        
        Vue.component('test-tom', {
			data: function(){
				return {
					num: 0
				}
			},
			template: `
				
TOM:{{num}}
`
, methods: { handle: function(){ hub.$emit('jerry-event', 2); } }, mounted: function() { // 监听事件 hub.$on('tom-event', (val) => { this.num += val; }); } }); 销毁事件:通过hub.$off()方法名销毁之后无法进行传递数据:hub.$off('tom-event');

三、组件插槽

3.1 组件插槽的作用

    组件的最大特性就是复用性,而用好插槽能大大提高组件的可复用能力
    组件插槽就是父组件给子组件传递内容

3.2 组件插槽基本用法

       Vue.component('alert-box', {
			template: `
				
ERROR: 默认内容
`
}); 这里的所有组件标签中嵌套的内容会替换掉子组件中的slot,如果不传值则使用 slot 中的默认值 <div id="app"> <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box> <alert-box></alert-box> </div>

3.3 具名插槽用法

    使用slot中的 "name" 属性绑定元素 指定当前插槽的名字

3.4 作用域插槽用法

    应用场景:父组件对子组件加工处理,既可以复用子组件的slot,又可以使slot内容不一致

总结

组件是Vue中非常重要的语法,有点像后端的api,在项目中使用组件可以增加代码的可读性和逻辑性,值得学习!

你可能感兴趣的:(vue,vue.js,javascript,前端,学习,开发语言)