Vue组件及组件之间的通信

一、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页面中使用组件

<div id="app">
        <my-com></my-com>  <!-- 使用组件:名称之间用'-'连接  -->
    </div>
    <script>
        //第一步:使用Vue.extend创建组件
        var mycom = Vue.extend({
            template:'<h2>蜗牛学苑</h2>'   //template:指定页面中要展示的html结构
        })
        //第二步:使用Vue.component注册组件
        Vue.component('myCom',mycom)  //'myCom'是注册的组件名,在注册时采用驼峰命名
        new Vue({
            el:'#app'
        })
    </script>

(2)使用template创建组件

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

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

强调:在Vue实例外部通过Vue.component创建或注册的组件称为全局组件
局部组件:创建方式和全局组件的创建方式一样,注册时必须放在Vue实例内部通过components完成

(2)在WebStorm中使用脚手架创建组件:

第一步:创建Vue component(在component这个文件点击右键新建VUE组件),组件命名采用驼峰命名

<template>
      //必须有一个html的标签作为模板的根标签
  </template>

卸载这些是因为有这些的话就不能用一个单词的名字做组件名,删了就可以用一个单词了

3、组件中的data:

(1)每个组件都有自己的数据:即每个组件都有自己的data

(2)vue实例的data和组件的data的区别:

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

B、组件的data必须是一个方法,该方法必须返回一个对象(必须写成方法的样子带"(){}"这样子,且返回值必须是一个对象)

C、vue实例中的data和组件中data在使用方法上是一样的(用{{}}插值表达式之类的方法都是一样的)

4、组件中的methods:和vue实例中的methods用法相同
练习1:定义一个Vue组件,组件的名称是StudentInfo,在该组件中显示3条学生信息(编号、姓名、性别、地址)

组件内容↓

<template>
<div>
  <table border="1px"   align="center">
    <thead>
    <tr>
      <th width="100">编号</th>
      <th width="100">姓名</th>
      <th width="100">性别</th>
      <th width="100">地址</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(item,index) in obj " :key="index">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.sex}}</td>
      <td>{{item.address}}</td>
    </tr>
    </tbody>
  </table>
</div>
</template>

<script>
export default {
  name: "studentInfo",
  data(){
   return {
     obj:[
       {id:1001,name:"张三",sex:"男",address:"西安"},
       {id:1002,name:"李四",sex:"女",address:"上海"},
       {id:1003,name:"王五",sex:"男",address:"深圳"},
     ]
    }




  }
}
</script>

<style scoped>
</style>

APP.vue中

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)子组件向父组件传值:是通过事件的形式来实现

练习2:在子组件中定义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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值