组件：
Vue中的组件主要用于提高代码的复用性、模块化、可维护性、可扩展性，并增强开发效率。
提高代码复用性和模块化：
组件是Vue中的一个重要概念，它们是可复用的Vue实例，拥有独一无二的组件名称。通过扩展HTML元素，组件可以以自定义的HTML标签形式出现，从而将代码组织成较小的、易于管理的块。这种方式允许开发人员将复杂的应用程序分解为更易于管理的部分，减少重复代码，提高可维护性。
增强可扩展性和开发效率：
组件允许创建可扩展且松散耦合的应用程序。新功能和特性可以通过添加新组件或修改现有组件轻松添加，而无需修改整个应用程序。使用预构建的组件，开发人员可以专注于应用程序的业务逻辑，而不是重复创建通用UI元素，从而缩短开发时间并提高生产力。
创建动态UI：
组件具有响应性和动态更新的能力。它们可以接受输入，响应事件，并渲染基于状态变化的用户界面。这允许创建交互式且动态的应用程序。
增强可测试性和可维护性：
组件封装了特定和孤立的功能，使得它们更易于测试和维护。开发人员可以专注于测试单个组件，而不必担心其对应用程序其他部分的影响。此外，组件化开发还提供了更好的组织结构，使得代码结构更加清晰，易于管理和维护。
支持可移植性和团队协作：
组件化开发有助于提高应用程序的可移植性，促进团队协作。通过将不同的功能模块分别封装成组件，可以减少代码复杂性和维护成本
组件在实例中展示：
这是一个全局的父组件
<div id = "app">
<zujian></zujian>
</div>实例与组件之间的数据不互通
实例和组件之间的数据是不互通的，
组件的数据一般只能在组件中使用
<body>
<div id = "app">
<child></child>
</div>
<template id="child">
<div>
<div>{{str}}</div>
<div v-for = "item in arr" :key="item">
<div>{{item}}</div>
</div>
</div>
</template>
</body><script>
let vm = new Vue({
data(){
return {
}
},
components:{
"child":{
template:"#child",
data(){
return{
str:"这是子组件",
arr:["哈哈哈哈","和嘿嘿","喂喂喂"]
}
}
}
}
})
vm.$mount("#app");
</script>组件之间的复用
父组件与子组件（局部组件）
<script>
let vm = new Vue({
data(){
return {
}
},
components:{
"child":{
template:"#child",
data(){
return{
str:"这是子组件",
arr:["哈哈哈哈","和嘿嘿","喂喂喂"]
}
}
}
}
})
vm.$mount("#app");
</script>实例是顶级父组件，实例里面的组件和实例的关系就是父子组件
父子组件传递数据
父组件像子组件传递的数据，可以使用正向传递：
<body>
<div id="app">
<zujian :zufuchuan="str" :zifuchuan2="str2"></zujian>
//传递数据的地方
</div>
<template id="zujian">
<div>
<div>{{zufuchuan}}</div>
<div>{{zifuchuan2}}</div>
</div>
</template>
</body>这里在实例中，zujian这里，用来接受实例传递的数据，并在子组件中用props数组接收，这样这个数据就可以用了
<script>
let vm = new Vue({
data(){
return{
str:"氨基酸覅偶阿萨德否",
str2:"hi家覅殴打撒女iowj"
}
},
components:{
"zujian":{
template:"#zujian",
data(){
return {
}
},
props:["zufuchuan","zifuchuan2"]
//接收数据的地方
}
}
})
vm.$mount("#app");
</script>用props数组接受数据
子组件向父组件传递数据，不支持
子组件向父组件传递数据
子组件无法直接向父组件传递数据
需要先定义一个run()方法，把数据通过视图模板传递给父组件，父组件写一个methods的fun()监听方法，接收子组件的值，拿到之后，在自己的data中写出来，才能用。
<body>
<div id="app">
<div>子组件传递过来的数据：{{ziStr}}</div>
<parent @event="fun"></parent>
</div>
<template id="parent">
<div>
<button @click="run">子组件像父组件传递数据</button>
</div>
</template>
</body><script src="../js/vue.min.js"></script>
<script>
Vue.component("parent",{
template:"#parent",
data(){
return{
str:"子组件中的数据"
}
},
methods:{
//传给父组件
run(){
this.$emit('event',this.str);
}
}
})
let vm = new Vue({
data(){
return {
ziStr:""
//定义出来才能用
}
},
methods:{
//接收
fun(value){
console.log("value::",value);
this.ziStr = value;
}
}
})
vm.$mount("#app")
</script>局部路由
常用于侧边栏或着导航栏中
<body>
<div id="app">
<ul>
<li>
<router-link to="/tianmao">天猫</router-link>
</li>
<li>
<router-link to="/taobao">淘宝</router-link>
</li>
<li>
<router-link to="/jingdong">京东</router-link>
</li>
</ul>
<router-view></router-view>
</div>
<template id="tianmao">
<div>
<h2>田毛毛</h2>
<h2>田毛毛</h2>
<h2>田毛毛</h2>
<h2>田毛毛</h2>
<h2>田毛毛</h2>
</div>
</template>
<template id="taobao">
<div>
<h2>田毛毛1</h2>
<h2>田毛毛1</h2>
<h2>田毛毛1</h2>
<h2>田毛毛1</h2>
<h2>田毛毛1</h2>
</div>
</template>
<template id="jingdong">
<div>
<h2>田毛毛2</h2>
<h2>田毛毛3</h2>
<h2>田毛毛3</h2>
</div>
</template>
</body>需要导入router包
<script src="../js/vue-router.js"></script>
<script>
let vm = new Vue({
data(){
return{
}
},
router: new VueRouter({
routes:[
{
//这个是根路径，也就是刚进页面访问的数据
path:"/",
component:{
template:"#tianmao"
}
},
{
path:"/tianmao",
component:{
template:"#tianmao"
}
},
{
path:"/taobao",
component:{
template:"#taobao"
}
},
{
path:"/jingdong",
component:{
template:"#jingdong"
}
},
]
})
})
vm.$mount("#app");
</script>
1786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
