vue组件小记

创建组件&父子相互传参&具名插槽

（注意符号大小写）

在components（最好再建一层文件夹）里新增一个vue文件 （pjwBorder.vue）
然后在同级再建一层 index.js

// @components/pjwBorder/index.js
// 方便后面引用组件 也可不用
import pjwBorder from './pjwBorder.vue'
export default pjwBorder

这是子组件

// @components/pjwBorder/pjwBorder.vue
<template>
  <div class="p-border">
      <span>hello!{{name}}</span>
      <van-button type="default" @click="click">按钮</van-button>
      // 具名slot
      <slot name="header">aaa</slot>
  </div>
</template>
<script>
  import { Button } from 'vant'
  export default {
  	components: {
      [Button.name]: Button
    },
    data () {
      return {
      }
    },
    props:{
      // 从父组件传进来的值 声明类型
      name：String
    },
    methods: {
      click(){
      	// 返回给父组件的值  用：change接收  后面是传的值
        this.$emit('change',666,333)
      }
    },
  }
</script>

父组件调用

// 在script上引用组件
import pjwBorder from '@/components/pjwBorder'
// 记得声明组件
export default {
	components: {
		pjwBorder		
	}，
	methods: {
		// 接收子组件传来的参数
		change(msg,abc){
			alert(abc)
		}
	}
}

在页面上使用

// template 中
<pjw-border button="pjw" @change="change">
	<span slot="header">bbb</span>
</pjw-border>