Vue组件化开发（第四天（2.组件））

最新推荐文章于 2023-08-01 14:18:50 发布

gakua

最新推荐文章于 2023-08-01 14:18:50 发布

阅读量105

点赞数

分类专栏： vue技术

本文链接：https://blog.csdn.net/weixin_42140901/article/details/83754657

版权

vue技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue 组件化开发

为了好维护管理和代码的复用，提高开发效率便于协同开发
分类页面级组件：
1. 一个页面是一个组件
2. 将可复用的部分抽离出来
一个自定义标签Vue就会把他看成一个嘴贱 div p span a header …可以给这些标签赋予一定的意义

全局组件

//html 组件名不要用大写，多个单词用’-‘连接（首字母可以大写）
<my-handsome></my-handsome>
//vue
Vue.componnent('my-handsome',{
	template:'<div>{{msg}}</div>'
	data(){
		return {msg:'111'}
	}
})

局部组件

先创建组件，随用注册组件，最后，使用组件。
组件是相互独立的不能直接跨作用域实例也是一个组件，组件中拥有生命周期函数
如果组件共用了数据会导致同时更新
子组件不能直接使用父组件的数据
组件理论上可以无限嵌套

let handsome = {template:'<div>111</div>'}
let vm  = new Vue({
	el：’#app‘，
	components:{
		handsome
	}，
	methods:{
	fn(){
			t
		}
	}
})

组件的属性传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="#app">
    <child :m="money"></child>
</div>
</body>
<script></script>
<script>
    let vm = new Vue({
        el:'app',
        data:{money:200},
        components:{
            child:{
                props:{//属性名和data中的名字不能相同
                    m:{
                        type:[],//校验属性的类型，如果不带‘：’得到的肯定是字符串类型 ：m='1' :m="true"
                        // default:0,//可以给m赋值默认值，如果不传默认值会调用default
                        required:true,//此属性是必循传递的，但是不能和defauld同用
                        validator(val){//第一个参数是当前传递的值，返回true表示通过false就是不通过
                            return val>300//自定义校验器
                        }
                    }, 
                template:'<div>儿子{{m}}</div>'   
                },
            }
        }
    })
</script>
</html>

gakua

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件化开发（第四天（2.组件））

Vue 组件化开发为了好维护管理和代码的复用，提高开发效率便于协同开发分类页面级组件：一个页面是一个组件将可复用的部分抽离出来一个自定义标签Vue就会把他看成一个嘴贱 div p span a header …可以给这些标签赋予一定的意义全局组件//html 组件名不要用大写，多个单词用’-‘连接（首字母可以大写）&lt;my-handsome&gt;&lt;/my-h...
复制链接

扫一扫