VUE组件使用中的细节
2019-05-01 本文已影响0人
流年逝去sky
table中使用组件的细节：直接使用<row></row>写法 发现<tr>没在<tbody>面
<row></row>
<div id="root">
<table>
<tbody>
<row>修改前的</row>
<row></row>
<row></row>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
template:'<tr><td>this is a row</td></tr>'
})
var vm = new Vue({
el:"#root"
})
</script>
改为<tr is="row"></row> 查看dom显示正常
image.png
<div id="root">
<table>
<tbody>
<tr is="row">修改后的</row>
<tr is="row"></row>
<tr is="row"></row>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
template:'<tr><td>this is a row</td></tr>'
})
var vm = new Vue({
el:"#root"
})
</script>
子组件中的data比如用return返回一个object 这样做是确保每个子组件通过函数返回object 每个组件有自己独立的数据空间
<script>
Vue.component('row',{
data:function(){
return{
content:'this is a content'
}
},
template:'<tr><td>{{content}}</td></tr>'
})
var vm = new Vue({
el:"#root"
})
</script>
ref 可以用来标记dom元素 然后使用 this.$refs. 来表示标记的dom元素
<body>
<div id="root">
<div ref='hi' @click="handleClick">hello world</div>
</div>
<script>
var vm = new Vue({
el: "#root",
methods: {
handleClick: function() {
alert(this.$refs.hi.innerHTML)
}
}
})
</script>
</body>
父组件传递给子组件时 子组件参数校验
content:String 字符串 ， Number数字
requird:true 必传
default:默认值 如果不传就用默认值
validator 校验组件的值
<div id="root">
<child content="123456"></child>
</div>
<script>
Vue.component('child', {
props: {
content: {
type: [String, Number],
required: false,
default: 'default vaue',
validator: function(value) {
return(value.length > 5)
}
}
},
template: '<div>{{content}}</div>'
})
var vm = new Vue({
el: '#root'
})
</script>
props属性：父组件使用子组件时 向子组件传递参数 如果子组件使用props接收了参数
非props特性：父组件使用子组件时 向子组件传递参数 子组件没有申明props来接收是无法使用这个参数的 另外非props特性 会显示在dom中
image.png
子组件中绑定原生click事件：@click.native="handleClick"
<body>
<div id="root">
<child @click.native="handleClick"></child>
</div>
<script>
Vue.component('child',{
template:'<div>Child</div>'
})
var vm = new Vue({
el: '#root',
methods:{
handleClick:function(){
alert('handleClick')
}
}
})
</script>
</body>
Vue中的插槽的使用
<body>
<div id="root">
<bcontent>
<div class="hd" slot='hd'>header</div>
<div class="ft" slot='ft'>footer</div>
</bcontent>
</div>
<script type="text/javascript">
Vue.component('bcontent', {
template: '<div><slot name="hd"><h1>default header</h1></slot ><div class="content">content</div><slot name="ft"></slot></div>'
})
var vm = new Vue({
el: '#root'
})
</script>
</body>
