十二.vue组件

---

组件

mvvm 数据驱动 组件化
组件：网页上组成部分（预定义组件、自定义组件）
组件语法:
组件也是Vue的实例（new Vue 他有的属性 组件都有）

  // 全局组件（挂载到Vue上，可以在任意组件以及实例的模板中使用）
  Vue.component(组件名,{
    template:
      //注意:这里只允许出现一个容器
      `
      <div>
        xx
        xxx
      </div>
    `,
    data(){
      return {

      }
    },
    methods:{},
    watch:{},
    computed:{},
    components:{
    	SubTitle
  	}
  })
  /* 
  注意：
    1，template 必须 有且只有一个根组件（除非使用v-if 或者 v-else-if才能出现多个）
    2，data属性 必须是一个方法 返回这个对象 组件会被复用（形成自己作用域，每一次都会重新开辟空间 ，多次使用不会互相影响）
    3，组件有 自己作用域 属性。方法等 都只能在自己内部使用
  */

 //  局部组件（挂载到其他的组件或者实例上，只能在挂载的组件中使用）
//  定义局部组件
 const SubTitle = {
      template:`
        <div>
          我是一个局部组件 
          {{ title }} 
        </div>
      `,
      data(){
        return {
          title:"我是局部组件数据"
        }
      }
    }

// 其他组件中注册
Vue.component("Home",{
  template:`
    <div>
      <sub-title></sub-title>
    </div>
  `,
  components:{
    SubTitle
  }
})
/* 
局部组件 是在 其他组件 的components属性中注册
注意只能在 组件的组件的template使用，无法在外部使用
*/

组件通信

父–子 props通信

//通过props
/* 
子组件中 定义props属性 props是一个数组 数组中定义待接收的 属性列表
props待接收列表会 渲染到 组件实例的 属性上 跟data中的数据是同级别的
注意：
  props key不要和 实例中已经存在属性重名（如data中的属性以及计算属性）
 */

const Child = {
  template:`
 	<!--2.在内容中解析-->
    <div>
      {{ title }}
      {{ title2 }}
    </div>
  `,
 //数组接收使用的较少，尝试用对象定义类型
 //props:['title','title2']
    //1.首先定义接受的数据名以及类型
    props:{
            title:{
                type:String,
                required:true
            },
            title2:{
                type:String,
                default:"我是谁"
            }
        }
}
// 传递
Vue.component("Happy",{
  template: `
    <div>
	<!-- 在全局变量中内容给局部添加属性已携带数据 -->
      <child title="父组件的静态数据" :title2="msg"></child>
    </div>
  `,
  data(){
    return {
      msg:"父组件中动态数据"
    }
  },
  components:{
    Child
  }
})

// props验证

{
  props:{
    a:String, // 只验证 类型，可以简写，直接写类型的值
    b:[String,Number], // 只验证类型，类型有多个 扔到数组中
    c:{
      type:String,
      required:true
    },
    d:{
      type: Number,
      default:10
    },
    e:{
      type:Array, // 如果类型是数组或者对象，默认值应该是函数返回默认值
      default: ()=> [1,2,3,4]
    }
  }
}

子向父通信 自定义事件

子组件中
methods:{
	a(){
		this.$emit("事件",参数); //触发子组件的一个自定义的事件
	}
}
在父组件中
  <child @自定义事件="fn"></child>

  {
    methods:{
      fn(参数){
        // 触发
      }
    },
    components:{
    	SubTitle
  	}
  }

例
子组件中
const subTitle = {
        template:`
        <h4>
        局部组件
        {{title}}
        <!--2.传输方法调用-->
        <button @click=a>按钮</button>
        </h4>
        
        `,
        data(){
            return {
                title:"传给全局用"
            }
        },
        methods:{
        	//1.定义传输方法，自定义一个事件名b，传参this.title
            a(){
                this.$emit("b",this.title)
            }
        }
    }
父组件中
Vue.component("Happy",{
        template:`
            <div>
                全局组件
                <!-- 3.自定义事件b绑定方法fn,注意一定要写在子组件的使用中 -->
                <sub-title @b="fn"></sub-title>
            </div>
        `,
        methods:{
            //4.定义方法fn,接收参数输出参数
            fn(e){
                console.log(e);
            }
        },
        components:{
            subTitle
        }
    })

兄弟组件通信 自定义事件 事件中心总线 （event bus）

利用一个第三方的实例 bus（event bus）
bus 触发自定义事件
由bus来监听这个事件
实例.$on(事件,回调)

const bus = new Vue();

bus.$emit("事件",参数)

bus.$on("事件",fn)

例
兄弟1定义一个事件传参,准备触发
methods: {
   a(){
   bus.$emit('aaa', this.msg)
   }
 }
兄弟2接收事件定义事件内容，需要钩子函数
mounted(){
   bus.$on("aaa",(msg)=>{
   this.msg = msg;
   alert('收到了兄弟')
}) 

ref组件通信 （⭐⭐⭐）

常用父组件中:都写在mounted钩子函数中
  <child ref="child"/>
this.$refs.child 获取子组件的实例
this.$refs.child.xx直接获取子组件data中的数据
this.$refs.child.xx() 直接调用子组件的方法

$parent $children

都写在mounted钩子函数中
常用子组件中
  this.$parent直接拿到父组件的实例
父组件中
  this.$children 拿到的是 父组件中的所有子组件（数组）

provide inject

父组件
  {
    provide:{
      a:10,
      b:20
    },
    template:'',
    data,
    xx
  }
  
  子组件中
  {
    inject:['a','b'] // 自动灌入到子组件上作为属性 所以可以直接通过this.a this.b拿到
  }

provide,indeject练习
<script type="text/javascript">
    const Title1={
        template:`
            <div>
                <h4>局部1111</h4>
                {{msg}}
            </div>
        `,
        data(){
            return {
                msg:''
            }
        },
        inject:['a','b'],
        mounted(){
            this.msg=this.a+this.b
        }
    }
    Vue.component("Happy",{
        template:`
            <div>
                <h4>全局组件</h4>
                <title1 ref="child"></title1>
            </div>
        `,
        provide:{
            a:"我是谁",
            b:20
        },
        components:{
            Title1
        }
    })
    const vm =new Vue({
        el:"#app"
    })
</script>