am-vuejs 中的 V.sync( obj,option )
有两个参数,参数一为当前组件对象,参数二为需要关联属性的对象或数组。
vuejs 子组件调用父组方法的定义
很多时候,我们的子组件作用有所不同,因此我们需要用相同的数据结构,而使用父组件中的方法来进行执行。
它们之间的关系不是很复杂,我们需要进行以下设置,就可以做到了
1.首先,在引用子组件时定义 v-on 属性,假如我们的子组件名称为 am-operation
,而父组件也就是当前组件中要给到子组件的方法为parentMethod
,那么代码如下
<am-operation v-on:callback="parentMethod"></am-operation>
注意:parentMethod
正是父组件中的方法。
2.然后,我们在子组件的模板部分需要调用的地方添加如下代码
<am-button type="success" lagel="提交" @click="childrenMethod( attr1,attr2 )"></am-button>
注意:此处 childrenMethod 为子组件中的方法。
3.最后,我们需要在子组件的 methods
中添加对应的 childrenMethod
方法如下
Vue.component('am-menu-operation', {
// ......
methods:{
childrenMethod( attr1,attr2 ){
this.$emit( 'callback',attr1,attr2 );
}
}
}
注意:重点就在 this.$emit
,而callback 正是 v-on:后定义的方法名称
vuejs 中的数据变化监测
数据
data: function(){
return {
a: true,
b: {
c:1,
b:2
}
}
}
监测数据 a 的变化
watch: {
a:function(newValue, oldValue) {
console.log(newValue)
}
},
监测数据 b.c 的变化 ,可以通过 computed 做中间层来指定对象属性
computed: {
bc() {
return this.b.c;
}
},
watch: {
bc(newValue, oldValue) {
console.log(newValue)
}
},
其它方法,这是 vuejs api 中介绍的方法
// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
// 做点什么
})
am-vuejs 穿越型组件
穿越型组件,指在 element-ui 的组件基础上增加了一定的组装配置后形成的新的组件,一般都是表单,由于其v-model 模式中间需要一层组件过度,因此称为穿越型,特点是需要配置两个标准属性
- dataObject:组件对应的是哪个表单数据对像
- dataName: 对应表单数据对象的数据名称是。
vue请求数据放在created好还是mounted里好
建议放在created里 created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。 mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
如果在mounted钩子函数中请求数据可能导致页面闪屏问题 其实就是加载时机问题,放在created里会比mounted触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了
一般使用 created 比较多,如果需要严禁的区别的话,我们可以这样理解,如果请求的数据,对结果 dom 是有影响的,那么建议放到 created 中,如果请求的数据是与 dom 无关的,那么可以话在 mounted 中
这样说,一个组件是通过某个数据来渲染 dom 的,那么必然应该将 数据放在 created中加载,但有一种情况,我们创建了一个 chat ,其中一些数据是需要 chat 渲染完毕后才产生作用的,就可以放在 mounted 中。
elements ui 中 el-tabs 组件切换 数据重置
无论是 created 还是 mounted 都在 props 数据交互之后发生。
elements ui
中的 el-tabs
组件在切换时,会触发一个组件的 props 数据重载,也就是会导致这样一个结果,如果你在 tabs 中的 pane 1 中放置了一个组件,该组件的数据通过 props 来指定,然后你在创建组件时通过 created 或者 mounted 重置或者修改了数据,那么当 tabs 被切换后,数据将被重置。
但这个重置,仅处于字符串型数据时会发生,如果是数据对象模式就不会有这个问题。
vuejs 中 created 和 mounted 的区别
首先 created 在前,mounted 在后,从过程上理解,created 在模板渲染成html前调用,mounted 则在模板渲染成html后调用。
在实际使用中,一般情况下没有什么太复杂的区别,但如果我们在页面中使用了一些组件,而希望在 created 或者 mounted 中进行数据配置,那么就要看对数据的需要是在 html 渲染之前还是之后。