05-组件化开发（父子组件通信、组件插槽的使用）【新手学习笔记】

本文链接：https://blog.csdn.net/fwz123/article/details/128378891

本文介绍了Vue.js中父子组件间的通信方法，包括通过props传递数据（父传子）和通过$emit触发事件（子传父）。同时，讲解了如何使用$children和$refs访问组件内部的方法和变量，以及组件插槽的基本使用和具名插槽的概念，展示了提高组件可扩展性的实践。

摘要由CSDN通过智能技术生成

内容简介：

由于父子组件不能直接引用对方数据
所以通过以下两种方式实现父子组件相互之间的通信
1.通过props属性实现父组件向子组件传递数据
2.通过$emit事件实现子组件向父组件传递数据

详细内容：

一、父子组件之间通信

1.通过props属性实现父组件向子组件传递数据（父传子）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件通信-父传子</title>
</head>
<body>

<!--父组件模板-->
<div id="app">
  <cpn v-bind:cmessage="message"></cpn><!--将父组件的message变量传给子组件-->
</div>

<!--子组件模板-->
<template id="cpn">
  <div>
    <h2>{{cmessage}}</h2>
  </div>
</template>


<script src='../js/vue.js'></script>
<script>

  // 子组件
  const cpn={
    template:`#cpn`,
    props:{
      cmessage:String // 在子组件的props属性中申明一个变量，用于接收父组件传递过来的参数
    }
  }

  //父组件
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello world!'
    },
    components:{
      cpn
    }
  })
</script>

</body>
</html>

2.通过$emit事件实现子组件向父组件传递数据（子传父）

<!--父组件模板-->
<div id="app">
  <!--cpnClick方法后面可以省略参数，系统会默认传过去-->
  <cpn v-on:itemclick="cpnClick"></cpn><!--监听子组件发射出来的事件“itemClikc”,如果有事件发生则执行cpnClick方法-->
</div>

<!--子组件模板-->
<template id="cpn">
  <div>
    <button v-for="item in categories" v-on:click="btnClick(item)"> <!--按钮监听，当发生点击事件时，执行btnClick方法，并将当前item作为参数传递过去-->
      {{item.name}}
    </button><br>
  </div>
</template>

<script src="../js/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){/*将发生点击事件的item数据传给父组件*/
        console.log(item.name);
        //自定义一个itemclick事件   emit：发射的意思
        this.$emit('itemclick',item)/*itemClick是发射事件名称  item是发射事件时同时传递的参数*/
      }
    }
  }

  //2.父组件
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊'
    },
    components:{
      cpn
    },
    methods:{
      cpnClick(item){/*定义一个item变量用于接收子组件传来的数据*/
        console.log(item);
      }
    }
  })
</script>

运行效果图：

二、组件访问

组件之间可以相互访问内部方法和变量等内容
父组件访问子组件：

this.$children(实际开发中用的比较少)

console.log(this.$children[0].name)   在父组件中访问子组件的一个变量

this.$refs(常用)

<cpn ref="aaa"></cpn>  
console.log(this.$refs.aaa.name)  

在父组件中访问子组件的一个变量，“aaa”可以帮助定位到具体子组件
组件标签使用过程中需要加上 ref="aaa"

子组件访问父组件和根组件：

this.$parent

console.log(this.$parent.name);   访问父组件中的name变量

this.$root

console.log(this.$root.message);   访问根组件（也就是vue实例）中的message变量

三、插槽的基本使用

组件的插槽：

组件的插槽是为了让我们封装组件更加具有扩展性
可以灵活决定组件内部一些细小部位的内容
基本使用：通过在组件模板中添加标签，来预留插槽位置
在标签中间添加内容可以设定为插槽的默认值
组件中如果了预留多个插槽，可以通过具名插槽来识别具体是哪个插槽

基本使用：

<div id="app"><!--父组件模板-->
  <cpn><button>按钮</button></cpn>
  <cpn><input type="text"></cpn>
  <cpn><span>哈哈哈</span></cpn>
  <cpn></cpn>
</div>

<template id="cpn"><!--子组件模板-->
  <div>
    <h2>我是组件</h2>
    <slot></slot><!--预留一个插槽-->
  </div>
</template>

具名插槽：

<div id="app"> <!--父组件模板-->
  <cpn><span slot="center">标题</span></cpn><!--插入到name="center"的插槽位置-->
</div>

<template id="cpn"><!--子组件模板-->
  <div>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>