<template> <div id="app"> <HelloWorld init="9" /> <!-- <Test></Test> --> <MyTest></MyTest> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' //注册组件 // import Test from "./components/Test.vue" export default { name: 'App', components: { HelloWorld, // Test } } </script>
<template> <div class="hello"> <h3>{{ init }}</h3> <button @click="changeName">+1</button> </div> </template> <script> export default { name: "HelloWorld", //props是自定义属性 为当前属性定义初始值 props:["init"], data() { return { count: 0, }; }, methods: { changeName() { this.count++; }, }, }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="less"> h3 { margin: 40px 0 0; } </style>