vue中的方法传递。

通过vue中组件的通信来实现

文章目录

• 一、组件是什么
• 二、代码运行解析
  • 1.代码片段一
  • 2.代码片段二
• 总结

一、组件是什么？

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树²。

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构。这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑¹。

你可以在一个单独的 `.vue` 文件中定义 Vue 组件，这被叫做单文件组件 (简称 SFC)。你也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用。此外，你还可以全局地注册一个组件，使得它在当前应用中的任何组件上都可以使用，而不需要额外再导入²。
 

二、代码运行解析

1.代码片段一

代码如下（示例）：School.vue

<template>
    <!-- //组件的结构 -->
    <div class="school">
        <h2>学校名称：{{ name }}</h2>
        <h2>学校地址：{{ address }}</h2>
        <button @click="sendSchoolName">把学校名给App</button>
    </div>
</template>

<script>
    // 组件交互相关的代码（数据、方法等等）
    export default{
        name:'School',
        props:['getSchoolName'],
        // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
        data(){
            return{
                name:'尚硅谷',
                address:'北京昌平'
            }
        },
        methods: {
            sendSchoolName(){
                this.getSchoolName(this.name)
            }
        }   
    }
</script>

<style >
  .school{
    background-color: skyblue;
    padding-left:200px;
  }
</style>

在模板部分，组件的结构被定义为一个带有类名为 school 的 div 元素，其中包含两个 h2 元素和一个 button 元素。h2 元素显示学校的名称和地址，这些数据来自组件的 data 对象。button 元素上有一个点击事件监听器，当按钮被点击时，它会触发 sendSchoolName 方法。

在脚本部分，组件的数据和方法被定义。数据对象包含学校的名称和地址，分别为 '尚硅谷' 和 '北京昌平'。sendSchoolName 方法通过调用传入的 getSchoolName 属性（这是一个函数）并传递学校名称作为参数来执行。

在样式部分，定义了 .school 类的样式。

但是，仅凭这段代码无法确定控制台上会出现“App收到了学校名 尚硅谷”。这取决于如何使用这个组件以及传递给它的 getSchoolName 函数的定义。

2.代码片段2

代码如下（示例）：App.vue

<template>
  <div class="app">
    <!-- <img src="./assets/logo.png" alt="logo"> -->
    <student name="张三" sex="男" age="23"/>
    <School :getSchoolName="getSchoolName"/>
  </div>
</template>

<script>
    //引入组件
    import Student from './components/Student.vue'
    import School from './components/School.vue'
    export default {
        name:'App',
        components:{
            Student,
                School
        },
        data(){
          return{
            msg:'你好呀！'
          }
        },
       methods:{
        getSchoolName(name){
          console.log('App收到了学校名',name)
        }
       } 
    }
</script>

<style>
  .app{
    background-color: gray;
    padding-left: 65px;
    padding-right: 65px;
  }
</style>

这段代码定义了一个名为 App 的 Vue 组件，它包含一个模板部分，一个脚本部分和一个样式部分。

在模板部分，组件的结构被定义为一个带有类名为 app 的 div 元素，其中包含两个子组件：Student 和 School。School 组件被传递了一个名为 getSchoolName 的属性，它的值是 App 组件的 getSchoolName 方法。

在脚本部分，组件的数据和方法被定义。数据对象包含一个名为 msg 的属性，其值为 '你好呀！'。getSchoolName 方法接受一个参数 name 并在控制台上打印一条消息，显示“App收到了学校名”和传入的名称。

综上所述，当用户点击 School 组件中的按钮时，它会触发 sendSchoolName 方法，该方法调用传入的 getSchoolName 属性（即 App 组件中定义的 getSchoolName 方法）并传递学校名称作为参数。然后，在控制台上打印一条消息，显示“App收到了学校名 尚硅谷”。

---

总结

好处：

将 getSchoolName 方法作为属性传递给 School 组件的好处在于，它允许子组件（即 School 组件）与父组件（即 App 组件）进行通信。这样，当子组件中发生某些事件（例如，用户点击按钮）时，它可以将信息传递回父组件进行处理。

在这种情况下，当用户点击 School 组件中的按钮时，它会触发 sendSchoolName 方法，该方法调用传入的 getSchoolName 属性（即 App 组件中定义的 getSchoolName 方法）并传递学校名称作为参数。然后，在控制台上打印一条消息，显示“App收到了学校名 尚硅谷”。

这种方法提供了一种灵活且可重用的方式来管理组件之间的通信。它使得子组件可以在不了解父组件内部实现细节的情况下与父组件进行交互。

<School :getSchoolName="getSchoolName"/>这句代码的作用是什么？

这行代码在 App 组件的模板中使用了 School 组件。它通过属性绑定语法 :getSchoolName="getSchoolName" 将 App 组件中定义的 getSchoolName 方法传递给 School 组件。

这意味着，在 School 组件中，可以通过调用传入的 getSchoolName 属性（这是一个函数）来执行 App 组件中定义的 getSchoolName 方法。在上面给出的 School 组件的代码中，当用户点击按钮时，会触发 sendSchoolName 方法，该方法调用传入的 getSchoolName 属性并传递学校名称作为参数。