Vue-笔记

vue笔记

1.父组件和子组件

<div id="app">
        <!-- 使用组件 -->
        <cpn2></cpn2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        

        //1.创建第一个组件构造器  （子组件）
       const cpnC1 = Vue.extend({
           template: `
           <div>
                <h2>我是标题</h2>
                <p>我是内容</p>
            </div>
           `
       })
        //2.创建第二个组件构造器 (父组件)
       const cpnC2 = Vue.extend({
           template: `
           <div>
                <h2>我是标题2</h2>
                <p>我是内容2</p>
                <cpn1></cpn1>
            </div>
           `,
           components:{
               cpn1:cpnC1
           }
       })

       //root组件 
        const app = new Vue({
            el:"#app",
            data:{
                message:'你好啊'
            },
            components:{
                cpn2:cpnC2
            }
        })
    </script>

2.注册组件语法糖

<div id="app">
        <!-- 使用组件 -->
        <cpn1></cpn1>
        <cpn2></cpn2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //1.创建组件的构造器
    //    const cpnC1 = Vue.extend({
           
    //    })
       //2.注册组件
       Vue.component('cpn1',{
        template: `
           <div>
                <h2>我是标题</h2>
                <p>我是内容</p>
            </div>
           `
       })

       //root组件 
        const app = new Vue({
            el:"#app",
            data:{
                message:'你好啊'
            },
            components:{
                'cpn2':{//注册局部组件的语法糖
                template:`
                <div>
                    <h2>我是标题2</h2>
                    <p>我是内容2</p>
                </div>
                `
            }
            }
        })
    </script>

3.模板的分离写法

<div id="app">
        <!-- 使用组件 -->
        <cpn></cpn>   
    </div>
    <template id="cpn">
        <div>
            <h2>我是标题</h2>
            <p>我是内容</p>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //1.创建组件的构造器
    //    const cpnC1 = Vue.extend({
           
    //    })
       //2.注册组件
       Vue.component('cpn',{
           template:'#cpn'
       })

       //root组件 
        const app = new Vue({
            el:"#app",
            data:{
                message:'你好啊'
            },
            components:{
                
            }
            
        })
    </script>

4.组件可以访问vue实例的数据吗？

不能！组件应该有一个地方保存自己的数据 ：data() 这个不是对象类型，是一个函数

 <div id="app">
        <!-- 使用组件 -->
        <cpn></cpn>   
    </div>
    
    <template id="cpn">
        <div>
            <h2>{{title}}</h2>
            <p>我是内容</p>
        </div>
    </template>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //1.创建组件的构造器
    //    const cpnC1 = Vue.extend({
           
    //    })
       //2.注册组件
       Vue.component('cpn',{
           template:'#cpn',
           data(){ //在这里保存组件的数据
               return {
                   title:'abc'
               }
           }
       })

       //root组件 
        const app = new Vue({
            el:"#app",
            data:{
                message:'你好啊'
            },
            components:{
                
            }
            
        })
    </script>