vue3.x 组件

注：实例环境 vue cli构建的项目

app.vue

<template>
  <Example></Example>
</template>

<script>
import Example from './components/Example'

export default {
  name: 'App',
  components: {
    Example
  }
}
</script>

<style>

</style>

Example.vue

<template>
    <div>
        <p>{{title}}</p>
        <Component1></Component1>
        <Component2></Component2>
        <Component1></Component1>
        <Component2></Component2>
    </div>
</template>

<script>
    import Component1 from "./Component1";
    import Component2 from "./Component2";
    export default {
        name: "Example",
        components: {Component2, Component1},
        data:function () {
            return {
                title: 'Example 的title'
            }
        }
    }
</script>

<style scoped>
</style>

Component1.vue

<template>
    <div>
        <h3>我是组件1</h3>
        <p>{{title}}</p>
    </div>
</template>

<script>
    export default {
        name: "Component1",
        data(){
            return {
                title: '组件1title'
            }
        }
    }
</script>

<style scoped>

</style>

Component2.vue

<template>
    <div>
        <h3>我是组件2</h3>
        <p>{{title}}</p>
    </div>
</template>

<script>
    export default {
        name: "Component2",
        data(){
            return {
                title: '组件2title'
            }
        }
    }
</script>

<style scoped>

</style>

浏览器显示

标签：vue,name,title,vue3,Component1,Component2,组件,Example
来源： https://www.cnblogs.com/hu308830232/p/14906789.html