Vue.js中组件传参的方法 - 基于webpack模板

在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的,

弗敢专也, 必以分人

 

环境: node.js npm vue-cli 以上安装请自行百度

 

一、项目创建

$ vue init webpack

　　　这里需要注意的是“前面的一些项目名称什么的都可以直接回车，最后三个选项要注意，是代码检测”，这个代码检测有点烦的地方是要求代码必须极其规范，我tab符用4个空格都不允许，必须两个，所以到这里我选择不用代码检测，webpack编译后不影响使用！

　　　上面的命令会在当前目录下生成一些文件，这些文件是基于webpack的vue项目模板，省时省力，不用自己去搭建环境（其实是因为我手动搭建的很不规范，有能力的同学自己来）

 

　　搭建好了环境，就可以开始码喽！

　　目录结构下我们注重的是src目录，里面是我们要敲码的地方（其他目录干嘛的在这里就不解释了，自行度）

 

二、开始

　　首先入口文件是main.js

　　可以看到

const vm = new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

　　此处new了一个实例，

　　并引入了路由 router

　　定义了实例的模板是App标签

 

我们进入与它同级的App.vue文件中

 

里面由3个结构组成

// html部分
<template></template>

// JS部分
<script></script>

// 样式部分
<style></style>

我们的html部分必须由一个根组件包裹

<template>
　　<div class="vue">
　　　　// code...
　　</div>
</template>

 

下面进入正题

 

<template>
　　<div class="vue">
　　　　<h1>This App Title</h1>
　　　　<my-name></my-name>
　　</div>
</template>

<script>
　　// 一般情况下，我会将组件放在components目录下
　　import Name from './components/Name.vue'
　　export default {
　　　　components: {
　　　　　　'my-Name': Name
　　　　}
　　}
</script>

上面我们就完成了对name组件的引用，我们还没有创建这个组件

 

进入components目录，新建文件Name.vue

 

<template>
　　<div class="name">
　　　　{{ myname }}
　　</div>
</template>

<script>
　　export default {
　　　　props: [
　　　　　　'yourname'
　　　　],
　　　　computed: {
　　　　　　myname () {
　　　　　　　　this.yourname
　　　　　　}
　　　　}
　　}
</script>

此处的重点是：props属性是接收传过来的值，另外使用了computed属性将收到的值赋给当前组件的data中的myname属性上，最终得以展示！

 

最后在App.vue组件中，使用

<my-name :yourname="fea"></my-name>

即可将值传给这个组件，并展示在页面上，具体你想用传来的值做什么，随你喽！