描述：
定义了单击事件，但是使用Vue组件生成的标签就检测不到单击的方法，并报错：Invalid handler for event "click": got undefined
把标签放到外面可以正常使用，使用Vue组件生成后就报错，而且msg这个也找不到了
请问该如何处理？以下是全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="container">
<div id="navbar_left">
<pr></pr>
</div>
</div>
<script>
Vue.component("pr",{
name:"pr",
template:"<p @click='this.toggle'>{{msg}}</p>",
data(){
return{
open:true
}
}
});
var app = new Vue({
el:"#navbar_left",
data:{
msg:"hello world",
},
methods:{
toggle(){
this.open = !this.open
}
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="container">
<div id="navbar_left">
<pr :msg="msg"></pr>
</div>
</div>
<script>
Vue.component("pr",{
name:"pr",
template:"<p @click='this.toggle'>{{msg}}</p>",
props: ["msg"],
data(){
return{
open:true
}
},
methods:{
toggle(){
this.open = !this.open;
}
}
});
var app = new Vue({
el:"#navbar_left",
data:{
msg:"hello world",
}
});
</script>
</body>
</html>