【愚公系列】2022年04月 Python教学课程 78-VUE组件中的数据和属性
【摘要】 前言因为是Python系列只是简单介绍VUE的基本使用。组件是Vue中的一个重要概念，是一个可以重复使用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。因为组件是可复用的Vue实例，所以它们与new Vue（）接收相同的选项，例如data，computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特...
前言
因为是Python系列只是简单介绍VUE的基本使用。
组件是Vue中的一个重要概念，是一个可以重复使用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。因为组件是可复用的Vue实例，所以它们与new Vue（）接收相同的选项，例如data，computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。
把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可。那么我们可以将其抽出为一个组件进行复用。
例如 页面头部、侧边、内容区，尾部，上传图片，等多个页面要用到一样的就可以做成组件，提高了代码的复用率。
一、数据的绑定
1.数据绑定
在vue中数据通过data属性进行绑定，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
{{name}}
</div>
<script>
new Vue({
el: '#app',
data: {
name:'python'
}
})
</script>
</body>
</html>
二、组件的使用
1.全局组件和局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<zujian_all></zujian_all>
</div>
<script>
// 局部组件注册,定义局部组件
var zujian_a={
template:'<div>局部组件1</div>',
};
// 全局组件
Vue.component(
'zujian_all',
{ // 在全局中使用绑定的数据 {{name}}
template:'<div>全局组件 <zujian_a></zujian_a> {{name}} </div>',
// components 将局部组件注册到全局组件中
components:{
zujian_a,
},
// data属性指定绑定的数据内容，可以在当前的组件中进行使用
data:function(){
return {name:'python'}
}
}
)
new Vue({
el: '#app',
})
</script>
</body>
</html>
三、组件传值
父组件给子组件传值，组件中通过props属性传递数据，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<zujian_all></zujian_all>
</div>
<script>
// 局部组件注册,定义局部组件
var zujian_a={
template:'<div>局部组件1 {{pos}} </div>',
// 在子组件中通过props属性定义接受值的名称
props:['pos']
};
// 全局组件
Vue.component(
'zujian_all',
{ // 在全局组件中调用子组件时，通过v-bind指定子组件中pos接受父组件中的哪个值
template:'<div>全局组件 <zujian_a v-bind:pos="name"></zujian_a> </div>',
// components 将局部组件注册到全局组件中
components:{
zujian_a,
},
// data属性指定绑定的数据内容，可以在当前的组件中进行使用
data:function(){
return {name:'python'}
}
}
)
new Vue({
el: '#app',
})
</script>
</body>
</html>
子组件给父组件传值，通过$emi将数据传递个父组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Ming</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id='app'>
<zujian_all></zujian_all>
</div>
<script>
var zujian_a={
template:'<div> 局部组件A <button v-on:click="isupload"> 上传</button> </div>',
methods:{
isupload:function(){
this.$emit('isListen','hello') // 子元素上的点击事件成功后，通过 $emit 将事件和数据传递给父组件
}
}
}
Vue.component('zujian_all',{
template:'<div> 全局组件 <zujian_a v-on:isListen="isShow"></zujian_a> </div>',
components:{
zujian_a
},
methods:{
isShow:function(data){
alert(data) //data参数接受子组件传递的值
}
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）