昨天在调试的时候发现的问题,关于data和return data,里面的数据都可以调用啊
data: {
name:libai
},
methods: {
function1(){
}
}
---------------------
return data(){
name: libai
},
methods:{
function1(){
}
}
假如我在函数里面调用,this.name都是可以调用到的。但是昨天在用一个组件的时候,根据例子用到了render模板,其中如果用的是data这种方式,调用this.funtion1(),显示未定义,但是如果是return data 就可以调用到this.function1,想知道这俩区别是什么?
实际代码
data(){
return {
{
align: 'center',
title: '删除任务',
render: (h, params) => {
return h('div', [
h('i-button', {
props: {
type: 'error',
size: 'small',
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.remove(params.index)
axios({
method: 'post',
url: '/delete_graph/',
data: Qs.stringify({'delete_name':params.row.name})
})
}
}
}, 'Delete')
])
}
}
}
}
这部分,如果不用return data click事件中this.remove函数是undefined。这里并不是组件把,是render函数的原因吗
官网有明确的解释,链接
When defining a component, data must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we use a plain object for data, that same object will be shared by reference across all instances created! By providing a data function, every time a new instance is created we can call it to return a fresh copy of the initial data.
也就是在定义component时,必须使用function的方式。