运行
<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>
运行结果