Vue组件和父子组件

【一】Vue组件化

1. 创建组件构造器对象

   • Vue.extend() 创建组件构造器

     const cpnc = Vue.extend({
                template: `
                <div>
                    <h2>我是标题</h2>
                    <p>我是内容</p>
                    <p>我是内容</p>
                </div>
                `
     })
     

2. 注册我们的组件

   Vue.component('my-cpn', cpnc);
   

3. 使用组件

【二】局部组件创建

    const cpnc = Vue.extend({
            template: `
            <div>
                <h2>我是标题</h2>
                <p>我是内容</p>
                <p>我是内容</p>
            </div>
            `
        })
        /* 注册组件的过程 */
        Vue.component('my-cpn', cpnc);
            
            
        
            
        const app = new Vue({
                el:"#app3",
                data: {
                    message: "我们测试"
                },
                methods: {
                    valueChange: function(event) {
                        this.message = event.target.value;
                        console.log('打印方法')
                    }
                },
                /* 注册基础组件 */
                components: {
                    cpn: cnnc;
                }
            })
        </script>

【三】父组件和子组件

在某一个注册组件中注册另一个子组件

// 子组件
const cpnc1 = Vue.extend({
            template: `
            <div>
                <h2>我是标题</h2>
                <p>我是内容</p>
                <p>我是内容</p>
            </div>
            `
        })
        // 是我们父组件
        const cpnc2 = Vue.extend({
            template: `
            <div>
                <h2>我是标题2</h2>
                <p>我是内容2</p>
                <p>我是内容2</p>
            </div>
            `
            /* 子组件属性 */
            comments: {
                cpn1: cpnc1
            }
})