一、methods中参数的传递
使用方法和正常的javascript传递参数的方法一样，分为两部：
1、在methods的方法中进行声明，比如我们给add方法加上一个num参数，就要写出add:function(num){}.
2、调用方法时直接传递，比如我们要传递2这个参数，我们在button上就直接可以写。<button @click=”add(2)”></button>.
现在知道了加参数的方法，看一段完整的代码，代码中给add添加了num参数，并在按钮上调用传递了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<meta
charset
=
"UTF-8"
>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>
methods Option
</title>
</head>
<body>
<h1>
methods Option
</h1>
<hr>
<div
id
=
"app"
>
{{ a }}
<p>
<button
@
click
=
"add(2)"
>
add
</button>
</p>
</div>
<script type="text/javascript">
var
app
=
new
Vue
(
{
el
:
'#app'
,
data
:
{
a
:
1
}
,
methods
:
{
add
:
function
(
num
)
{
if
(
num
!=
''
)
{
this
.
a
+=
num
}
else
{
this
.
a
++
}
}
}
}
)
</script>
</body>
</html>
|
这时，再点击按钮是每次加2个数字。
二、methods中的$event参数
传递的$event参数都是关于你点击鼠标的一些事件和属性。我们先看看传递的方法。
传递：<button @click=”add(2,$event)”>add</button> 。
我们这时候可以打印一下，看看event到底是个怎样的对象。你会发现，它包含了大部分鼠标事件的属性。
三、native 给组件绑定构造器里的原生事件。
在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。
现在我们把我们的add按钮封装成组件：
声明btn对象：
|
1
2
3
|
var
btn
=
{
template
:
`
<
button
>组件
Add
<
/
button
>
`
}
|
在构造器里声明：
|
1
2
3
|
components
:
{
"btn"
:
btn
}
|
用.native修饰器来调用构造器里的add方法
|
1
|
<p>
<btn
@click
.
native
=
"add(3)"
>
</btn>
</p>
|
四、作用域外部调用构造器里的方法
这种不经常使用，如果你出现了这种情况，说明你的代码组织不够好。
|
1
|
<button
onclick
=
"app.add(4)"
>
外部调用构造器里的方法
</button>
|
4057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
