组件使用的细节注意点


组件使用的细节注意点:

1、is
部分标签使用的时候,不能直接使用自定义的组件,而要使用is=属性.
虽然写的是tr,但是调用的是row标签。
类似的还有,列表的ul,ol标签
<table>
  <tbody>
    <tr is="row"></tr>
    <tr is="row"></tr>	    
  </tbody>	
</table>

Vue.component('row', {
    template: '<tr><td>this is a row</tr></td>'
})

2、vue中操作DOM(操作动画),通过ref获取dom元素或组件的引用。
<div id='root'>
	<div ref="hello" 
	@click="handlerClick">Hello World</div>
</div>

var vm = new Vue({
	el:'#root',
	methods: {
		handleClick() {
			console.log(this.$refs.hello.innerHTML)
		}
	}
})
//------------------------------
<div id='root'>
	<couter ref="counter1" @change='handleChange'></couter>
	<couter ref="counter2" @change='handleChange'></couter>
	<div>{{total}}</div>
</div>
<script>
	// 子组件
	Vue.component('couter', {
		template:'<div  @click="handlerClick">Hello World</div>',
		data: function() {
			return{
				number: 0
			}
		},
		methods: {
			handleClick: function() {
				this.number ++
				this.$emit('change')
			}
		}
	})
	// 父组件
	var vm = new Vue({
	el:'#root',
	data: {
		total: 0
	}
	methods: {
		handleChange() {
			this.total = this.$refs.counter1.number + 
			this.$refs.counter2.number 
		}
	}
	});
})
</script>

组件的参数校验:
Vue.component('child', {
	props: {
		// 字符串校验
		content: String,
		content: [String, Number]
		content: {
			type: String,
			// required: true,
			// defualt: 'abc'
			// 字符串长度校验,长度必须大于5
			validator: function(value) {
				return (value.length > 5)
			}
		}
	},
	template: '<div>{{content}}</div>'
})
非props属性,会显示在dom结构中。

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值