美文网首页
Vue 组件

Vue 组件

作者: 只留一人爱_1d04 | 来源:发表于2018-09-24 13:44 被阅读0次

    组件(component):组件化开发 组件可以扩展 HTML 元素,封装可重用的代码。

         组件名不可以使用已经存在的html元素
         组件中的data数据是一个函数,并且要有一个返回值
    
    
    <body>
      <div id='app'>
      
          <my-component></my-component>
      </div>
       <script src='js/vue.js'></script> 
       <script>
        Vue.component('my-component',{
            template:`
                   <div>
                       <p>{{mess}}</p>
                       <button @click='alt'>按钮</button>
                   </div>
         `,
            data:function(){
                return{
                    mess:'我是组件中的值'
                }
            },
            methods:{
                alt:function(){
                    alert('bdsjjf')
                }
            }
        })   
       
       
        new Vue({
            el:"#app",
            data:{
                msg:'jsdkvg'
            },
            methods:{
            
            }
        })
        </script>
    </body>
    

    二 组件之间的嵌套

    <body>
       <div id='app'>
           <my-father></my-father>
      
       </div>
        <script src='js/vue.js'></script>
        <script>
           Vue.component("my-father",{
               template:`
                   <div>
                      <h1>这是父组件</h1>
                       <my-child v-bind:num='msg'></my-child>
    
                   </div>
                `,
               data:function(){
                   return{
                       msg:'我是福组件中的值'
                   }
               }
           }) 
       
           Vue.component("my-child",{
               props:['num'],
               template:`
                  <div>
                     <ul>
                         <li>这是组组件的内容1</li>  
                         <li>这是组组件的内容2</li>  
                         <li>这是组组件的内容3</li> 
                     </ul>
                     <a href='#'>{{num}}</a>
                 </div>
             `
           })
       
    
           new Vue({
               el:"#app"
           })
    
        </script>
    </body>
    

    三 父传子
    <script>

           Vue.component('my-tit',{
               props:['tit'],
               template:`
                     <h2>{{tit}}</h2>
                   `
           })
       
       
           Vue.component('my-fruit',{
               props:['fruList'],
               template:`
                    <ul>
                        <li v-for="value in fruList">{{value}}</li>
                    </ul>
                 `
           })
       
       
           new Vue({
               el:'#app'
           })
    
        </script>
    

    四 子传父

    <script>
            Vue.component("my-father",{
                template:`
                    <div>
                        <my-child @send="reg"></my-child>
                        <a href="#">{{mess}}</a>
                    </div>
                    `,
                data:function(){
                    return{
                        mess:''
                    }
                },
                methods:{
                    reg:function(txt){
                        this.mess=txt
                    }
                }
            })
            Vue.component("my-child",{
                template:`
                    <button @click="alt">按钮</button>
                `,
                data:function(){
                    return{
                        msg:"我是自组建中的元素,要传到福组建中"
                    }  
                },
                methods:{
                    alt:function(){
                        this.$emit('send',this.msg)
                    }
                }
            })
            new Vue({
                el:"#app"
            })
        </script>
    

    五 非父子关系传
    <script>
    var bus=new Vue();
    Vue.component('child',{

            data:function(){
                return{
                    mes:'我是child组件中的数据,传到brother'
                }
            },
            methods:{
                fasong:function(){
                    bus.$emit('send',this.mes)
                }
            }
        })
        Vue.component('brother',{
            template:`
                <div>
                    <h2>我是brother组件中的数据</h2>
                    <a href="#">{{res}}</a>
                </div>
            `,
            data:function(){
                return{
                    res:''
                }
            },
            mounted:function(){
                bus.$on('send',mes=>{
                    this.res=mes
                })
            }
        })
        new Vue({
            el:"#app"
        })
    </script>

    相关文章

      网友评论

          本文标题:Vue 组件

          本文链接:https://www.haomeiwen.com/subject/bngcoftx.html