vue95-为count组件声明props自定义属性

运行

<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>

运行结果