一组件

什么是组件？
组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。
>模块化：是将代码逻辑的角度进行划分的。方便代码分层开发，保证每次功能模块的职能单一。
>组件化：是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重复调用。

 <script>
       /* var c1= Vue.extend({
            template:'<div>hey jude</div>'
        })
        Vue.component('c1',c1) */
        
        
        
        /* Vue.component('c1',Vue.extend({
            template:'<h2>hey jude!</h2>'
        })) */
        
        Vue.component('cc',{
            template:'<div><h1>兽人永不为奴!</h1><span>heyjude</span></div>'
        })
        
        let vm = new Vue({
            // 绑定对象
            el:'#app',
            data:{
                
            },
            methods:{
                
            }
        })
    </script>

组件有且只有唯一的根元素

template:'<div><h1>兽人永不为奴!</h1><span>heyjude</span></div>'
template:'<h1>兽人永不为奴!</h1><span>heyjude</span>' F12会报错

图片.png

创建组件的方式3

全局组件
<div id='app'>
            <!-- <c1></c1> -->
            <!-- <cc></cc> -->
            <template id="t1">
                <div>
                    <p>legens never die!</p>
                    
                </div>
            </template>
        </div>

    Vue.component('zz',{
            template:'#t1'
        })
        
        
        
        
        let vm = new Vue({
            // 绑定对象
            el:'#app',
            data:{
                
            },
            methods:{
                
            }
        })

定义私有组件

<div id="app2">
        <login></login>
        <login2></login2>
        </div>
        
        <template id="z2">
            <div style="font-size: calc(); color: #009A61;">
                <p>hello world</p>
            </div>
        </template>

<script>
            
var v1 =new Vue({
                el:'#app2',
            data:{
                
            },
            methods:{
                
            },
            components:{//定义实例内部私有组件
                login:{
                    template:"<h1>私有的login组件</h1>"
                },
                login2:{
                    template:"#z2"
                }
            }
        })
            
        </script>

图片.png

组件中的data
组件中的data必须是一个方法 这个方法还必须返回一个对象才行

<div id="app">
            <z1></z1>
</div>
<div id="app3">
            <login2>   
  无法访问 默认子组件无法访问父组件的数据
</div>

/* var v3 =new Vue({
            el:'#app3',
            components:{
                
                login2:{
                        template:'<div>不要问我从哪里来--{{msg}}</div>'
                },
                
                data:function(){
                    return {
                        msg:'我的故乡在远方'
                    }
                }
            }
        }) */

Vue.component('z1',{
            template:'<div>不要问我从哪里来--{{msg}}</div>',
            data:function(){
                return {
                    msg:'我的故乡在远方'
                }
            }
        })
            
            var vm =new Vue({
                el:'#app',
                data:{},
            })

图片.png
question:
为什么组件中的data是一个function？
组件的切换v-if component
==============================================================

父组件向子组件传值
组件中所有props的数据都是通过父组件传递给子组件的
props的数据 都是只读的 无法重新赋值
data可读可写
说白了 不要乱改你老爹的数据

<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
        
        <link rel="stylesheet" href="../demo.css"/>
<div id="app">
                <login v-bind:parentmsg="msg"></login>
                <!-- <table>
        <tr>
            <th colspan="3">父组件数据</td>
        </tr>
        <tr>
            <td>name</td>
            <td>{{ name }}</td>
            <td><input type="text" v-model="name" /></td>
        </tr>
        <tr>
            <td>age</td>
            <td>{{ age }}</td>
            <td><input type="text" v-model="age" /></td>
        </tr>
    </table> -->
                
                <login2 v-bind:name="name" v-bind:age="age"></login>
            </div>
            
                <!-- <template id="login2">
                                <table>
                    <tr>
                        <th colspan="3">
                            子组件数据
                        </th>
                    </tr>
                    <tr>
                        <td>my name</td>
                        <td>{{ name }}</td>
                        <td><input type="text" v-model="name" /></td>
                    </tr>
                    <tr>
                        <td>my age</td>
                        <td>{{ age }}</td>
                        <td><input type="text" v-model="age" /></td>
                    </tr>
                </table>
                </template>
             -->

<script>
       var v1= new Vue({
        el:'#app',
        data:{
            msg:'窗前明月光',
            name:'kobe',
            age:12
        },
        components:{
            
            
            login:{
                data(){
                        
                    return {
                        title:"4396永不为奴"
                    }
                },
                
                template:"<h3 @click='change' >子组件的数据---{{parentmsg}}+'{{title}}'</h3>",
                props:['parentmsg','xiaoming'],
                methods:{
                    change(){
                        this.parentmsg='低头思故乡'+this.title
                    }
                }
            },
            /* login2:{
                template:'#login2',
                props:['name','age']
            } */
        
        }
        
       })
    </script>

图片.png
图片.png

复习

子组件获取父组件的data 调用父组件方法

<div id="app">
                <vm v-bind:name="name" @zz="xixi" @father="haha"></vm>
                <p>{{name}}</p>
                <p>{{age}}</p>
                <p>{{sex}}</p>
</div>
        <template id="t1">
            
            <div>
                <p @click="myclick">点我</p>
                <input type="button" @click="son" value="点我2"/>
            </div>
template标签下面需要加一个div套起来,不然会报错
Component template should contain exactly one root element. If you are using
        </template>


<script>
        
        var vm={
            template:"#t1",
            props:['name','age','sex'],
            data(){
                return {
                    msg:"兽人永不为奴!"
                }
            },
            methods:{
                    myclick(){
                        console.log("子组件数据")
                        this.$emit("zz",'faker','benji')
                    },
                    son(){
                        console.log("我是儿子")
                        this.$emit("father",'KOBE')
                    }
            }
            
        }
        
        var v1=new Vue({
            el:'#app',
            data:{
                name:'兽人永不为奴',
                age:12,
                sex:'male'
            },
            methods:{
                xixi(s1,s2){
                    console.log("英雄联盟召唤师",s1,s2)
                }
                ,
                haha(s1){
                    console.log("魔兽世界召唤师",s1)
                }
            },
            components:{
                vm
            }
        })
        
        
        /* var v1 =new Vue({
            el:'#app',
            data:{
                msg:'兽人永不为奴!'
            },
            methods:{
                xixi(s1,s2){
                    console.log("唧唧复唧唧"+s1+s2)
                }
            },
            components:{
                login:{
                    template:'<h1>无问西东--{{msg}}</h1>',
                    props:['msg'],
                        
                    methods:{
                        myclick(){
                            console.log("子组件事件")
                            this.$emit("show",'6',9)
                        }
                    }
                }
            }
            
        }) */
    </script>

图片.png

2获取DOM元素

<div id="app">
            <input type="button" value="点击获取DOM元素" @click="getEle" />
            <vm id="com" ref="com" v-bind:name="name"></vm>
            <p>{{name}}</p>
            <p id="p1" ref="p1">hey jude</p>
        </div>
        <template id="t1">
            <div>
                <p>xii</p>
                
            </div>
        </template>

<script>
        var vm={
            template:'#t1',
            props:['name'],
            data(){
                return{
                    price:'$999999999'
                }
            },
            methods:{
                say(){
                    console.log("慌什么")
                }
            }
            
            }
            var vm =new Vue({
                el:'#app',
                data:{
                    name:'Kobe'
                },
                methods:{
                    getEle(){
                        console.log(this.$refs.com.price)
                         console.log(this.$refs.p1.innerText)
                        this.$refs.com.say()
                    }
                },
                components:{
                    vm
                }
            })
        
        
        
        
        
    </script>
        

图片.png

http://www.cnblogs.com/keepfool/p/5625583.html
https://github.com/shy1118999/vue.js