过了一个星期了,对Vue有了初步的认识,这里说一下Vue到底干嘛的。
Vue的作用是将所有的组件模块化,分在了以.vue结尾的文件中,内部的元素被<template></template>包裹,每个部分代表一个功能(也可以多个功能,单个功能会更友好,毕竟模块化了),对于这些vue文件,除了功能子模块外,还需要根模块,将多个分散模块组合到一起,变成一个完整的页面。
在每个模块构造时,难免会发生数据交换,模块的数据赋值,函数定义等等,这些是定义在<script></script>之间的js脚本部分,是每个模块独有的部分。每个模块脚本部分大致的内容可以体现为:
<script>
//引入其他vue模块,如下面一行代码,引入子模块组件
import child from './child.vue'
//定义工具函数
function(){
}
export default {
name:'',//名字
data(){
return {
//变量数据的赋值
}
},
components:{
//组件的注册
},
methods:{
//模块内,事件触发的私有方法
},
created(){
//模块内,页面初始化方法,加载完成之前执行,执行顺序:父组件->子组件
},
mounted(){
//模块内,页面初始化方法,加载完成后执行,执行顺序:子组件->父组件
},
computed:{
//计算属性
}
watch:{
//监听值(对data里面定义的变量进行监听)的变化,自定义函数进行处理
},
props:[
//父模块传过来的数据(变量)
],
}
</script>
这里主要对props属性进行分析,对于模块间,最经常遇到的就是父模块与子模块的数据通信。在Vue中,子模块可以通过props属性获取到父模块传递过来的数据,子模块也可以通过this.$emit(parentFunction, params)来调用父模块的方法,这里有个坑。
父模块(parent.vue)代码:
<template>
<div id="app">
<input v-model="parentData"/>{{parentData}}
<child :childData="childData" @changeParentData="updateParentData"></child>
</div>
</template>
<script>
import child from './components/child.vue'
export default {
name:'parent',
data(){
return {
parentData:"父亲给孩子的礼物",//父亲的数据
childData:"孩子数据", //给孩子的数据,需要在父模块中转递给孩子(子孩子可以自己定义
//自己的数据,这里仅仅为了演示传递数据的过程,自孩子不定义
}
},
components:{
'child':child,//对child组件进行注册,以能够识别<child></child>标签
},
methods:{
updateParentName(data){
this.parentData = data.parentDate;
},
},
}
<script>
子模块(child.vue)代码:
<template>
<div>
<h1>这里是孩子,接收到父亲的数据:{{childData}}</h1>
<button @click='sendD("孩子改变父亲的数据")'>点击发送</button>
</div>
</template>
<script>
export default {
name:'child',
props:["childData"],//用到了父亲传递过来的数据childData
methods:{
sendD(val){
debugger;
let data={
parentDate : val
};
this.$emit('changeParentData',data);//函数可以触发父亲模块中的changeParentData函数,参数为data
}
}
}
</script>
这里需要注意一点,在parent.vue中,如下一行代码很重要: