Vue组件及组件之间的通信

最新推荐文章于 2023-01-05 17:32:20 发布

须臾不敢忘

最新推荐文章于 2023-01-05 17:32:20 发布

阅读量1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_74331160/article/details/128536949

版权

一、Vue脚手架的使用

1、通过命令行使用vue-cli的指令创建：vue init webpack 项目名称

2、使用webStorm软件：本质仍然使用vue脚手架

3、使用vue ui创建：vue提供的图形化的操作界面

二、Vue的组件和组件之间的通信

1、组件：是vue的重要的特征之一，可以扩展html的功能，也可以封装代码实现重复使用。

2、组件的创建：

3、组件中的data

4、组件中的methods：和vue实例中的methods用法相同

5、Vue组件之间的通信（组件之间的数据传递）

课堂练习：在子组件中定义input，将input的值传递给父组件

一、Vue脚手架的使用

1、通过命令行使用vue-cli的指令创建：vue init webpack 项目名称

build文件夹：用于webpack打包配置文件夹

config文件夹：与webpack相关的配置文件夹

|——- index.js：可以改变项目默认的端口号

node_moudles：npm 安装的支持项目运行的库

src文件夹：项目源代码目录

|——- assets：资源目录，存放图片、css、js文件等

|——- components：组件文件夹，用来存放用户自定义的组件

|——- router：路由文件夹，用来存放路由文件

|——- App.vue：根组件。可以包含其他组件

|——- main.js：vue项目的入口js文件

static文件夹：用来存放静态资源

index.html：vue项目的页面文件（首页）

package.json：npm的配置文件（所有包的信息）

2、使用webStorm软件：本质仍然使用vue脚手架

public文件夹：

|——- index.html：Vue项目的入口文件

src文件夹：

|——-assets：资源目录，存放图片、css、js文件等

|——-components：组件文件夹，用来存放用户自定义的组件

|——-App.vue：根组件。可以包含其他组件

|——-main.js：vue项目的入口js文件

package.json：npm的配置文件（所有包的信息）

vue.config.js：vue项目自身的配置文件

3、使用vue ui创建：vue提供的图形化的操作界面

vue ui

二、Vue的组件和组件之间的通信

1、组件：是vue的重要的特征之一，可以扩展html的功能，也可以封装代码实现重复使用。

2、组件的创建：

（1）非脚手架方式下创建：

第一步：使用Vue.extend创建组件

第二步：使用Vue.component注册组件

第三步：在html页面中使用组件

<body>
    <div id="app">
        <my-com></my-com> <!-- 使用组件：名称之间用-连接 -->
        <com-demo></com-demo>
    </div>
    <script>
        //第一步：使用Vue.extend创建组件
        var mycom = Vue.extend({
            template:'<h2>蜗牛学院</h2>'
        })
        //第二步：使用Vue.component注册组件
        Vue.component('myCom',mycom) //myCom是注册得组件名，在注册时采用驼峰命名

        Vue.component('comDemo',{
            template:`<div>
                        <label>
                            <input type="text">
                        </label>
                      </div>`
        })

        new Vue({
            el:'#app'
        })
    </script>
</body>

（2）使用template创建组件

第一步：使用template创建html页面模板，并给template定义id属性

第二步：使用template的id属性值进行注册

强调：

全局组件：在Vue实例外部通过Vue.component创建或注册的组件称为全局组件

局部组件：创建方式和全局组件的创建方式一样，注册时必须放在Vue实例内部通过components完成

<body>
    <div id="app">
        <com3 />
    </div>

    <template id="temp">
        <div>
            <h2>蜗牛学院</h2>
            <select name="" id="">
                <option value="#">请选择</option>
                <option value="1">成都</option>
                <option value="2">重庆</option>
                <option value="3">深圳</option>
            </select>
        </div>
    </template>

    <script>
        // Vue.component('com3',{ //全局组件
        //     template:'#temp'
        // })

        new Vue({ //局部组件  components -->多加一个s
            el:'#app',
            components:{
                com3:{
                    template:'#temp'
                }
            }
        })
    </script>
</body>

（3）在WebStorm中使用脚手架创建组件：

第一步：创建Vue component，组件命名采用驼峰命名

<div id="app">
        <my-com></my-com> <!-- 使用组件：名称之间用-连接 -->
        <com-demo></com-demo>
</div>

3、组件中的data

（1）每个组件都有自己的数据：即每个组件都有自己的data

（2）vue实例的data和组件的data的区别：

A、vue实例的data是一个对象

B、组件的data必须是一个方法，该方法必须返回一个对象

C、vue实例中的data和组件中data在使用方法上是一样的

4、组件中的methods：和vue实例中的methods用法相同

5、Vue组件之间的通信（组件之间的数据传递）

（1）Vue组件之间的关系：

A、父子关系：A组件和B组件、B组件和C组件、B组件和D组件

B、兄弟关系：C组件和D组件

C、隔代关系：A组件和C组件、A组件和D组件

（2）父组件向子组件传递数据：通过props方式向子组件传递数据（在子组件中添加props属性）

父组件：App.vue

子组件：Son.vue

App.vue ——-users数组 ———> Son.vue

（3）子组件向父组件传值：是通过事件的形式来实现

课堂练习：在子组件中定义input，将input的值传递给父组件

//子组件：son.vue
<template>
   <div>
     <label>
       子组件：<input  v-model="sonInfo" @input="sendInfo"/>
     </label>
   </div>
</template>
<script>
export default {
  name: "Son",
  data(){
    return {
      sonInfo: ''
    }
  },
  methods: {
    sendInfo(){
      //$emit方法：第一个参数是触发的事件名,第二个参数是子组件发生给父组件的数据
      this.$emit('changeInfo',this.sonInfo)
    }
  }
}
</script>

//父组件：App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h2>父组件接收子组件的信息：{{ title }}</h2>
    <hr/>
    <Son v-on:changeInfo="updateTitle"/>
  </div>
</template>
<script>
import Son from './components/Son'
export default {
  name: 'App',
  components: {
    Son
  },
  data(){
    return {
      title:''
    }
  },
  methods:{
    updateTitle(e){ //参数e：接收的是子组件传递过来的数据
      this.title = e
    }
  }
}
</script>