vue之父组件与子组件

2.简单使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="../js/vue.js"></script>
</head>
<body>
<h2>父组件与子组件</h2>
<pre>
这个概念很好理解:
    组件中 包含 组件 结构层了父组件与子组件的关系
</pre>
<hr>
<div id="app">
    <!-- 5.使用父组件-->
    <c-parent></c-parent>
</div>
<script>
    // 1.创建组件构造器(子组件)
    const componentChild = Vue.extend({
        // 相当于一个模板
        template: '   <div>' +
            '            <h5>我是 子组件</h5>' +
            '            你好,我是自定义的子组件......' +
            '        </div>'
    })
    // 2.创建组件构造器(父组件组件)
    const componentParent = Vue.extend({
        template: '<div>' +
            '        <h4>我是 父类主键</h4>' +
            '        你好,我是自定义的父组件......' +
            '        <c-child></c-child>' +
            '    </div>',
        // 3.注册子组件到父组件中
        components: {
            'c-child': componentChild
        }
    })

    let app = new Vue({
        el: '#app',
        // 4.注册父组件到vue实例中
        components: {
            'c-parent': componentParent
        }
    })
</script>
</body>
</html>
View Code