Vue.js 组件之间传递数据

组件是可复用的 Vue.js 实例。组件最重要的概念是“可复用”。每个组件实例的作用域是相互独立的,也就是说不同组件之间的数据是无法相互引用。但是,父组件可以通过 Prop 向子组件传递数据,也可以通过监听子组件事件来获取数据。因此,通过公共的父组件这个桥梁就可以实现组件之间进行数据传递。

废话不多说,撸代码看效果图。

index.html:

<div id="app">
    <h3>vue-prop-demo</h3>
    <brother1></brother1>
    <brother2></brother2>
</div>
<script type="text/x-template" id="brother1">
    <div>
        <input type="text" v-model="message">
        <input type="submit" value="传送">
    </div>
</script>
<script type="text/x-template" id="brother2">
    <div>获取到的兄弟组件的内容:</div>
</script>

demo.js:

Vue.component('brother1', {
    template: '#brother1',
    data: function() {
        return {
            message: ''
        }
    },
})
Vue.component('brother2', {
    template: '#brother2',
})


new Vue({
    el: '#app',
})

运行后如图所示:

现在要做的是将 brother1 组件中的 input 输入框的内容,通过点击“传送”按钮,使得 brother2 组件收到数据。

具体的做法分为 4 步。

第一步,点击“传送”按钮触发一个名称为 transfer 的自定义事件,并传入 brother1 组件上的 message 数据。

<input type="submit" value="传送" @click="$emit('transfer', message)"> 

第二步,父组件监听 transfer 事件,并触发一个名称同样为 transfer 的事件处理方法。

<brother1 @transfer="transfer"></brother1> 

第三步,父组件的名称为 transfer 的事件处理方法只做一件事,将传入的 message 参数赋值给 brothermessage 数据。

new Vue({
    el: '#app',
    data: {
        brothermessage: '',
    },
    methods: {
        transfer: function(arg) {
            this.brothermessage = arg;
        },
    },
})

第四步,通过 Prop 选项,并且用 v-bind(简写为 :)到动态传递 brothermessage 数据到 brother2 组件中。

index.html:

<brother2 :brothermessage="brothermessage"></brother2>
...
<div>获取到的兄弟组件的内容:{{ brothermessage }}</div>

demo.js:

Vue.component('brother2', {
    template: '#brother2',
    props: [
        'brothermessage',
    ],
})

下面是完整的示例代码:

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>vue-prop-demo</title>
</head>
<body>
    <div id="app">
        <h3>vue-prop-demo</h3>
        <brother1 @transfer="transfer"></brother1>
        <brother2 :brothermessage="brothermessage"></brother2>
    </div>

    <script type="text/x-template" id="brother1">
        <div>
            <input type="text" v-model="message">
            <input type="submit" value="传送" @click="$emit('transfer', message)">
        </div>
    </script>
    <script type="text/x-template" id="brother2">
        <div>获取到的兄弟组件的内容:{{ brothermessage }}</div>
    </script>

    <script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
    <script src="demo.js"></script>
</body>
</html>

demo.js:

Vue.component('brother1', {
    template: '#brother1',
    data: function() {
        return {
            message: ''
        }
    },
})

Vue.component('brother2', {
    template: '#brother2',
    props: [
        'brothermessage',
    ],
})


new Vue({
    el: '#app',
    data: {
        brothermessage: '',
    },
    methods: {
        transfer: function(arg) {
            this.brothermessage = arg;
        },
    },
})

运行时效果截图:

以上就是 Vue.js 组件之间传递数据的简单实现。

源码我已上传到 GitLab 上,需要的请自取。Git 仓库地址。

BootstrapVue 安装指南

BootstrapVue 是基于 Bootstrap v4 + Vue.js 的前端 UI 框架。BootstrapVue 作为学习 Vue.js 框架本身的入门框架,我认为是非常不错的。Bootstrap 框架本身是轻量级的、易于学习的,在世界范围内非常流行,有许多第三方插件和主题样式。Vue.js 作为一个渐进式框架,核心库只关注视图层,不仅易于上手,还便于与第三方框架或既有项目整合。

作为 Vue.js 新手,这篇文章旨在记录 BootstrapVue 框架的安装步骤。

准备工作,安装 Vue CLI

Vue CLI 包名称从 vue-cli 改成 @vue/cli。如果安装了老版本的 vue-cli(1.x 或 2.x),需要先移除老版本:

npm uninstall -g vue-cli

再安装新版本:

npm install -g @vue/cli

查看 vue 版本:

vue --version

如果显示 3.x,表明安装正确了。

新建 Vue 项目

vue create bootstrapvue-demo

当提示 Please pick a preset 时,选择默认的 default 并回车。

运行 Vue 项目

cd bootstrapvue-demo
npm run serve

浏览器访问 localhost:8080,如下图显示就表明成功了。

安装 BootstrapVue

npm install bootstra-vue bootstrap axios

引入 BootstrapVue 和 Bootstrap CSS

修改 src/main.js

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.config.productionTip = true

new Vue({
render: h => h(App),
}).$mount('#app')

修改 src/components/HelloWorld.vue

<template>
  <b-container fluid class="p-4">
    <b-row>
      <b-col sm="3" v-for="item in list" v-bind:key="item.index">
        <b-img thumbnail fluid :src="item.strCategoryThumb" v-bind="mainProps"></b-img>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import axios from "axios"

export default {
  name: 'HelloWorld',
  data() {
    return {
      mainProps: {
        class: 'mb-2'
      },
      list: []
    }
  },
  mounted() {
    axios
        .get("https://www.themealdb.com/api/json/v1/1/categories.php")
        .then(response => {
        this.list = response.data.categories
      })
        .catch(err => {
        console.log(err)
      })
  }
}
</script>

刷新浏览器,正常情况下会像下面一样展示一组食物图片。

至此,BootstrapVue 的入门安装指南就结束了。要想深入了解 BootstrapVue 的用法和细节,请去查阅它的官方文档。

项目源代码我上传到了 GitLab 上,需要的请自取。

参考链接:
https://juejin.im/post/5cd2c1f06fb9a031f10ca447