Vue中的父组件和子组件，以及两者通信

通常情况下，组件只分为全局组件和局部组件两种，但事实上，经常可以看到在一个组件构造器中注册了另外一个组件。

一.父组件与子组件

<script>
const cpn-c1 = Vue.extend({ // 子组件
	template: `
	<div>
	<h1>我是标题1</h1>
	<p>我是内容，哈哈哈</p>
	</div>
	`
})
const cpn-c2 = Vue.extend({ // 父组件
	template: `
	<div>
	<h1>我是标题2</h1>
	<p>我是内容，呵呵呵</p>
	</div>
	`
	components: { //在cpn-c2内部注册组件cpn1
	cpn1: cpn-c1
	}
})

const app = new Vue({
	el: "#app",
	components: {
		cpn2: cpn-c2
	}
})
</script>

二.父子组件之间的通信

我们知道，子组件是不能引用父组件或者Vue实例中的数据的
但是开发中，往往一些数据确实需要从上层传递到下层

• 比如在一个页面中，我们从服务器请求到了很多的数据
• 其中一部分数据，并非是整个页面的大组件来展示的，而是需要下面的子组件来展示
• 这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）

1.如何进行父子组件间的通信？

• 通过props向子组件传递数据
• 通过事件emit向父组件传递数据

2.props基本用法，父传子

• 在组件中，使用选项props来声明需要从父级接收到的数据
• props的值有两种方式
  1）方式一：字符串数组，数组中的字符串就是传递时的名称，为一个变量
  2）方式二：对象，对象可以设置传递时的类型，也可以设置默认值，注意当类型为Object/Array时，默认值必须为函数形式

	<div id="app"> 
        <cpn :cmovies="movies" :cmessage="message"></cpn>
    </div>
    
    <template id="cpn">
        <div>
            <ul>
                <li v-for='item in cmovies'>{{item}}</li>
            </ul>
            <p>{{cmessage}}</p>
        </div>
    </template>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <script>
    //1.子组件
    const cpn = {
        template: "#cpn",
        props:["cmovies","cmessage"], // 1.字符串数组形式
		props:{
		// 2.对象形式
		cmovies:Array,
		cmessage:String,
		}
		
		cmovies:{
		type:Array,
		default(){
		    return[]  // 类型为对象/数组时，default为函数类型，默认值表示如果未给cmovie传值，输出的内容
		}
		cmessage:{
		type:String,
		default:"aaaaaaa",
		required:true // 表示必须要给cmessage传值，否则会报错
		}
		}
    }
    
     //2.(父组件)
     var app = new Vue({
         el: "#app",
         data:{
            movies:['海王','海贼王'],
            message:"你好啊",
         },
         components:{
             'cpn': cpn
         }
     })
    </script>

注意：v-bind后面不允许出现驼峰标识，要写成c-movies的形式

3.子传父，$emit基本用法

• 子传父时，需要用自定义事件来完成
• 何时需要自定义时间呢？
  1）当子组件需要向父组件传递数据时，就要用到自定义组件了
  2）v-on不仅可以监听DOM事件，也可以用于组件间的自定义事件
• 自定义事件流程：
  1）在子组件中，通过**$emit()来发射事件
  2）在父组件中，通过v-on**来监听子组件事件

<div id="app"> 
        <cpn @item-click="cpnClick"></cpn> // 通过v-on监听子组件事件，函数名称后面不需要加参数
    </div>
    
    <template id="cpn">
    <div>
        <button v-for="item in categories" @click="btnClick(item)">
            {{item.name}}
        </button>
    </div>
    </template>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <script>
    //1.子组件
    const cpn = {
        template: "#cpn",
        data() {
            return{
                categories:[
                    {id:"aaa" ,name:"热门推荐"},
                    {id:"bbb" ,name:"手机数码"},
                    {id:"ccc" ,name:"家用电器"},
                    {id:"ddd" ,name:"电脑办公"},
                ]
            }
        },
        methods:{
            btnClick(item){
                this.$emit('item-click',item) // 第一个为自定义事件名称，第二个为参数
            }
        }
    }
     //2.(父组件) 
     var app = new Vue({
         el: "#app",
         data:{
         },
         components:{
             'cpn': cpn
         },
         methods:{
             cpnClick(item){
                console.log(item);
             }
         }
     })
    </script>