vue学习：6、组件基础之基本定义-优快云博客

本文详细介绍了Vue.js中组件的使用，包括全局与局部组件的注册与调用，以及如何利用过滤器进行数据展示的自定义处理。同时，探讨了slot插槽的使用，展示了如何在组件中预留位置供父组件填充。

2019独角兽企业重金招聘Python工程师标准>>>

注册一个全局组件语法格式如下：

Vue.component(tagName, options)

<div id="app">
    <runoob></runoob>
</div>
 
<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

局部组件

<div id="app"></div>
		<script>
			var MyHeader = {
				template: '<div>我是头部</div>'
			};
			var MyBody = {
				template: '<div>我是1号身体</div>'
			};
			//函数调用的方式创建组件
			var MyBody2 = Vue.extend({
				template: '<div>我是2号身体</div>'
			});
			var MyFooter = {
				template: '<div>我是底部<button @click="showNum(123)">点我</button></div>',
				methods: {
					showNum: function(num) {
						alert(num);
					}
				}
			};
			new Vue({
				el: "#app",
				components: {
					//声明要用的组件
					//key是组件名称，value是组件对象
					'my-header': MyHeader,
					'my-body': MyBody,
					'my-body2': MyBody2,
					'my-footer': MyFooter,
				},
				template: `
				<div>
				<my-header/>
				<my-body/>
				<my-body2/>
				<my-footer/>
				</div>
				 `
			});
		</script>

过滤器全局和局部两种过滤器
组件内 filters:{ 过滤器名:过滤器fn} 最终fn内通过return产出最终的数据
使用方式 {{ 原有数据 | 过滤器名(参数1,参数2) }}

// 声明一个全局的过滤器
			Vue.filter('toUSD', function(value) {
				return `$${value}`
			});

			var App = {
				template: `
					<div>
						<h1>增加符号</h1>
						<input type="text" v-model="myText" />	
						<h1>{{ myText | toUSD	}}</h1>						
					</div>
				`,
				data: function() {
					return {
						myText: '123'
					}
				},				
					myText: function(newV, oldV) {
						console.log(newV + '  ' + oldV);						
					}
				}
			}

slot 就是父组件传递的DOM结构
vue 提供的内置组件 <slot></slot>

            var MyLi = {
				template: `<li>,
					以下预留第一个坑
					<slot name="one"></slot>
					<hr/>
					以下预留第二个坑
					<slot name="two"></slot>
				</li>`
			}
			Vue.component('my-li', MyLi);
			//入口组件
			var App = {
				template: `
				<div>
					<ul>
						<my-li><h1 slot="one">在这里</h1></my-li>
					
					</ul>
				</div>				
				`
			}
			new Vue({
				el: '#app',
				components: {
					app: App
				},
				template: '<div><app/></div>'
			})

转载于:https://my.oschina.net/qingqingdego/blog/2649272