在学java面向对象的时候,想必大家都听过这样一句话“万事万物皆对象”,如今我们来到vue的时候,也有这样一句话“万事万物皆组件”,所以本篇文章将带领大家详细了解vue中最重要的一部分“Vue组件”
目录
一、Vue组件的组成部分:
Vue组件的组成可以分为三部分;分别是<template></template>、<Script></Script>、<style></style>
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app',
data () {
},
methods: {},
computed: {},
watch: {}
}
</script>
<style>
</style>
二、如何在项目中注册组件?
2.1 全局注册:
组件的全局注册,是在main.js中,通过import 和Vue.component配合,来将一个Vue文件注册成一个标签,从而达到全局使用的效果。步骤流程如下:
2.2 本地注册:
进行组件的本地注册的时候,是在app.vue文件中导入需要注册成组组件的文件,比如:import Header from‘./component/Header’,然后在app.vue的<script>标签中使用component属性进行组件的声明。具体代码示例如下:
<template>
<div id="app">
<MHeader></MHeader>
</template>
<script>
import MHeader from './components/Header.vue'
export default {
name: 'app',
data () {
},
components: {
"MHeader": MHeader
}
}
</script>
<style>
</style>
注:本地注册标签的时候,只能在注册的文件中进行标签的使用
三、各组件之间的参数传值:
在进行参数传递前呢,我们首先要了解一个属性的使用‘props’ ,props是表示一个组件的参数部分,props的写法有两种,分别如下:
1、props:[参数列表],例如:props:[‘myTitle1’,‘myTitle2’],就是在props里放了两个属性,来接收其他组件传递过来的值
// 第一种参数类表
props:[‘myTitle1’,‘myTitle2’]
2、props: { 'myHeaderTitle': { type: String, required: true, default: 'xxxxxx' }, 'btf':{ type:Function } };该props表示定义了两个参数,分别是‘myHeaderTitle’,和‘btf’。其中myHeaderTitle表示的意思是:参数的类型是String,必须存在,当参数不存在时候默认值为‘xxxxxx’;btf参数表示的是,接收的参数是一个Function(函数类型)
/ 第二种
props: {
'myHeaderTitle': {
type: String,
required: true,
default: 'xxxxxx'
},
'btf':{
type:Function
}
}
3.1 父传子
各组件之间的传值--父传子,是在子组件中通过props属性来定义需要接收值的属性,通过插值表达式获取vue对象中的属性值(属性值来自于data、computed、props),其中props里放的是其他组件传递过来的值,在父标签中通过使用在标签中写明参数的键值对来传递参数。流程如下:
3.2 子传父
子传父这种方式是比较复杂的一种传参方式,将采取分开梳理的方式,分别对子、父标签进行讲解以及整体梳理
子标签: 子标签中的props中定义了一个两个属性;分别是‘myHeaderTitle’,‘btf’,在子标签中对myHeaderTitle中的值进行页面展示。然后是在子标签中的定义了一个‘按钮’,当点击的时候调用btf函数,将btf函数声明在props标签中。代码如下:
<template>
<div id="app">
<!--{{msg}}-->
<h1>我是header</h1>
{{myHeaderTitle}}
<button @click="btf('hello java')">点我</button>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
// 第一种参数类表
// props:['myHeaderTitle'] /
// 第二种
props: {
'myHeaderTitle': {
type: String,
required: true,
default: 'xxxxxx'
},
'btf':{
type:Function
}
}
}
</script>
<style>
</style>
父标签:父标签中通过使用子标签对值分别进行接收传递
<template>
<div id="app">
<myHeader :myHeaderTitle="msg" :btf="mybtn"></myHeader>
</div>
</template>
<script>
import MHeader from './components/Header.vue'
export default {
name: 'app',
data () {
return {
msg:'myHeaderTitlemyHeaderTitlemyHeaderTitlemyHeaderTitle'
}
},
methods:{
mybtn:function (inf) {
this.msg=inf;
}
}
}
</script>
<style>
</style>
代码块执行流程如下:
在按钮未点击之前执行的是一个父传子的过程,在按钮点击后执行的是子传父过程,然后修改myHeaderTitle的值回显到页面上
3.3 改进版参数传递
改进版参数传递是以事件发射的方式来实现子传父的效果,通过在子组件中使用this.$emit(“键”,“值”),在父组件中使用的子标签中使用@键=‘msg=$event’,其中$event就能得到子组件传的值,msg是父组件中的属性。
子标签定义如下:
<template>
<div id="app">
<button @click="DoClick">我是content,点我</button>
</div>
</template>
<script>
export default {
name: 'app',
methods:{
DoClick(){
this.$emit("newName","小王")
}
}
}
</script>
<style>
</style>
父组件定义如下:
<template>
<div id="app">
<!--改进版参数传递-->
<myContext @newName="msg=$event"></myContext>
</div>
</template>
<script>
import MHeader from './components/Header.vue'
export default {
name: 'app',
data () {
return {
msg:'myHeaderTitlemyHeaderTitlemyHeaderTitlemyHeaderTitle'
}
}
}
</script>
<style>
</style>