1.安装vue init webpack vuebase
2.按照描述填写信息；或者yes;no
3.进入项目目录：cd vuebase
3.安装npm : npm i
4.启动项目：npm start
-----------------------------------------------------------------------------------------------------------------
动态或者静态的props
props的type的校验
props中的类型是数组或者对象，必须返回一个function
结构：
父组件：
<template>
<div class="parent">
父组件：
<p>{{sendParentinfo}}</p>
小明明称呼：
<Child title="父组件的数据" nick="小宝贝" friend="" parentss="小宝贝爸爸" :age="age" @sendParentinfo="sendParentinfos" />
</div>
</template>
<script>
import Child from './child'
export default {
name: "parent",
components: {
Child
},
data() {
return {
sendParentinfo:"",
age:1000
}
},
methods: {
sendParentinfos(data) {
this.sendParentinfo=data
}
}
}
</script>
<style lang="css" scoped>
</style>
-----------------------------------------------------------------------------------------------------------
子组件：
<template>
<div class="child">
子组件：
<ul>
<li v-for="item in friends">{{item}}</li>
</ul>
{{title}}--{{age}}---{{nick}}---{{parentss}}<button @click="sendParent" type="button">改变子组件向父组件传递数据的按钮</button>
</div>
</template>
<script>
export default{
name:"child",
//props:["title","age"],
props:{
title:String,
age:Number,
nick:{
type:String,
default:"大宝贝"
},
parentss:{
type:String,
required:true
},
friends:{
type:Array,
default:function(){
return ["大宝贝闺蜜","大宝贝闺蜜1","大宝贝闺蜜2","大宝贝闺蜜3"]
}
}
},
data(){
return{
}
},
methods:{
sendParent(){
this.$emit("sendParentinfo","这个是子组件的数据");
}
}
}
</script>
<style lang="css" scoped>
</style>