vue91-在app组件中使用Test组件

<template>
  <div id="app">
    <HelloWorld />
    <Test></Test>
  </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>
    <div class="geyao">{{ geyao }}</div>
    <h3>哈哈哈</h3>
    <button @click="changeName">修改</button>
  </div>
</template>
<script>
//data 必须是函数
export default {
  name: "geyao",
  data() {
    return {
      geyao: "我是歌谣",
    };
  },
  methods: {
    changeName() {
      this.geyao = "fangfang";
    },
  },
};
</script>
<style lang="less">
.geyao {
  color: aquamarine;
}
h3{
  color: red;
}
</style>

运行结果