<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{title}}</h1>
<mycomponent></mycomponent>
</div>
<script>
Vue.component("mycomponent",{
template: "<div><el-popover placement="top-start" title="" width="200" trigger="hover" content=",,,"> <el-button slot="reference">hover </el-button></el-popover><el-button @click="click"></el-button></div>",
data () {
return {
message: "hello world"
}
},
mounted(){
console.log("")
console.log(this.message)
// console.log(app.title)
},
methods:{
click(){
console.log("")
console.log(app.title)
}
}
})
var app = new Vue({
el: "-sharpapp",
data: {
title:""
},
})
</script>
</body>
</html> code is as follows:
1, new Vue is defined as app
2, data has title value as "main title"
3, mycomponent component click method execution, console.log (app.title) can run
4, mycomponent component mounted execution, console.log (app.title) will report an error
solution? Thank you