码迷,mamicode.com
首页 > 其他好文 > 详细

vue3.x 组件

时间:2021-06-20 18:33:01      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:loading   param   script   ram   cli   UNC   width   pre   blog   

 

注:实例环境 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 组件

标签:loading   param   script   ram   cli   UNC   width   pre   blog   

原文地址:https://www.cnblogs.com/hu308830232/p/14906789.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!