vue3.x 组件

• Z时代
• 2024-01-10
• 分类：综合

注：实例环境 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>

浏览器显示

以上是 vue3.x 组件 的全部内容， 来源链接： utcz.com/z/380377.html