Vue全局组件和局部组件

Vue全局组件和局部组件、父传子；子传父

Java中万物皆对象，Vue中万物皆组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

Vue的组件化设计思想借鉴了Java的面向对象思想。Java认为万物皆对象，在Vue中，万物皆组件。也就是说，在实际的vue项目中，以及使用了Vue框架的项目中，Vue的对象都会以组件的形式出现，能被反复使用。要想实现组件化，需要在页面中注册组件：关于注册的方式有两种，分别是全局注册和本地注册。

全局组件和局部组件都是在Vue中的Components包下，创建一个名为 组件名.vue的文件

**全局组件: **可以被多个vue 实例使用
**局部组件：**只能被当前声明的vue实例使用

全局组件：

步骤：

1、创建全局组件，布局；
2、声明全局组件；
3、在Vue 实例中 使用全局组件

1、创建全局组件，布局：

<template>
    <div>
        <h1>MyQuanJuComponent</h1> 

</div>

</template>

<script>     //注意如果<script>里面有set  up 就删去，否则就会出错
export default {
    name:"MyQuanJuComponent"   //给全局组件创建一个名字，后面使用就是用这个名字当作标签
    data（）{
    return {

		}
	}
}
</script>

2、声明组件 （因为是全局组件所以要在main.js中声明）

在main.js中

`//导入组件`
import MyQuanJuComponent from "./components/MyQuanJuComponent"
//声明全局组件
Vue.component("MyQuanJuComponent",MyQuanJuComponent)     //第一个参数是id，就是export中的name

3、在Vue实例中使用全局组件 （就是在App.vue中使用全局组件）

<MyQuanJuComponent></MyQuanJuComponent>  //这里的标签名就是创建全局组件中的name

局部组件

步骤：

1、创建局部组件、布局

2、声明局部组件

3、使用局部组件

1、创建局部组件

<template>
    <h1>
        myjubuComponent
    </h1>
</template>
<script>
export default {
    name:"MyJuBuComponent",
    data(){
        return {

  		}
	}
}
</script>

2、声明、导入局部组件

因为是局部组件，所以在使用局部组件的vue中导入和引用

这里是在App.vue中导入和声明

//导入局部组件
import MyJuBuComponent  from  "./components/MyJuBuComponent"



export  default {

name："App",
components:{
		//声明局部组件  (写组件的name)
	}

}

父组件向子组件传值

通过子组件的props部分，来指明可以接收的参数，父组件通过在标签中写明参数的键值对来传递参数。

props是表示一个组件的参数部分，那么props的写法有两种：

	1）props:[参数列表]

	比如： props:['MyProp1','MyProp2',...]

	2）props:{参数名1:{type:String,required:true,default:'XX'},参数名2:{...}}

1、首先在子组件中加入可以接受的参数（形参）

有两种方式：

props：[‘参数1’，‘参数2’]
props：{
参数1：{
type：String，
required：true
default：‘默认内容’   //可写可不写

},
参数2：{
type：String，
required：true
default：‘默认内容’   //可写可不写

}

}

2、在父组件中写入参数

export default{
data（）{
return {
父参数1：‘值’，
父参数：‘值’，
		}

	}
}

3、在父组件中的子组件的标签内，进行绑定。

 <子组件name  v-bind:参数1（子组件声明的形参）="父参数1" ：参数2="父参数2"></子组件name>
 

4、在子组件中div块内显示参数

<h1>{{参数1}}，{{参数2}}</h1>   //这里面的参数1、2是子组件自己定义的形参的名字，也就是绑定“=”左边的名字   运用插值表达式展现

子组件向父组件传值

1、先在子组件里面写一个参数，并把它定义为函数类型（也就是方法类型）

代码如下：

props:{
  zichuanfu:{
    type:Function
  }
}

2、写一个子组件的数据，就是要传过去的参数

代码如下：

data(){
  return {
    info:"我是子组件的数据，是儿子！"
  }
},

注意：data（）{} 等同于data：function（）{}

3、在子组件中写组件的内容，（按钮并且要绑定你写的那个方法。还要把要传过去的数据，当作参数传过去。）

代码如下：

<template>
  <div>
    <h1>子组件Component</h1>
    <button v-on:click="zichuanfu(info)">子传父</button>
  </div>

</template>

4、父组件接收参数（注意父组件接收参数一定要先导入把组件导入父组件中，这样才能调用子组件。）

代码如下：

import Component1 from "./components/Component1.vue";    //导入

export default {        //声明
  name: 'App',
  components: {
    Component1
    }

5、在负组件中写方法，对应子组件的方法（就是和子组件的方法进行绑定。）

代码如下：

methods: {
    fatherzichuanfu:function (val){  // todo val就是子组件的数据
      alert("子向父传值："+val)
    }
  },

6、使用子组件，并且父组件的方法要和子组件的方法进行绑定！！！

代码如下：

<h1>子组件向父组件传值</h1>
<Component1 v-bind:zichuanfu="fatherzichuanfu"></Component1>   <!--  等号左边是子组件的方法，右边是父组件的方法！-->