vue创建子组件,不要用js的写法

用vue的语法怎么创建子组件,不要用js的写法,官网用的是js的写法

img

哈喽,其实子组件也是一个vue文件,然后在父组件importt引入并在components选项注册就可以了,示例代码如下:
子组件:

<template>
    <div class="children">
        子组件{{name}}
    </div>
</template>

<script>
export default {
    // 传值
    props: {
        name: {
            type: String,
            default: '',
        },
    },
    components: {},
    data () {
        return {}
    },
    computed: {

    },
    methods: {},
}
</script>

<style scoped>

</style>

父组件:

<template>
    <div class="page-welcome">
        欢迎您回来!
        <children name="哈哈哈"></children>
    </div>
</template>

<script>
import children from './children' // 引入子组件

export default {
    name: 'Welcome',
    components: {
        children,
    },
    data () {
        return {}
    },
    computed: {
    },
    methods: {},
}
</script>

<style scoped>

</style>

用vue-cli直接新建vue文件就行