在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> 即可将值传给这个组件，并展示在页面上，具体你想用传来的值做什么，随你喽！