I had a very serious problem when I was in Ken"s Vue official document.
when using the official example, I encountered some holes that led to always reporting an error. Several queries did not solve the problem and still reported an error.
I don"t know exactly how to put it.
after cli finished building the project, I pasted the code directly into the document to test dynamic prop
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<div id="prop-example-2">
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>
</div>
</template>
<script>
import Vue from "vue"
Vue.component("child", {
// JavaScript camelCase
props: ["myMessage"],
template: "<span>{{ myMessage }}</span>"
})
new Vue({
el: "-sharpprop-example-2",
data(){
return{
parentMsg: "Message from parent"
}
}
})
export default {
name: "App"
}
</script>
<style>
-sharpapp {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: -sharp2c3e50;
margin-top: 60px;
}
</style> if there is no place to write, there will always be two errors
1, [Vue warn]: Cannot find element:-sharpprop-example-2
2, [Vue warn]: Property or method "parentMsg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
ask the great god for advice! Thank you very much!