vue----06

1、给组件绑定原生事件

 

   <counter @click.native="handkeClick""></counter>

 

使用组件时，在后面加native可以直接绑定原生事件，如果不加，则为自定义事件

 2、非父子组件间的传值

一般有2种方式：1、vuex 2、发布订阅模式 / BUS / 总线 / 观察者模式

 

<div id="root">
   <child content='Lee'></child>
   <child content="Bee"></child>
   
</div>

<script>
    Vue.prototype.bus = new Vue()
   Vue.component('child',{
       data: function() {
           return{
                selfContent: this.content
           }
       },
       props: {
           content:String
       },
       template: '<div @click="handLeClick">{{selfContent}}</div>',
       methods: {
            handLeClick: function() {
                this.bus.$emit('change',this.selfContent)
            }
       },
       mounted:function() {
           var this_ = this
           this.bus.$on('change',function (msg) {
               this_.selfContent = msg
             })
       }
   })
    var vm  = new Vue({
        el:"#root",
        data: {
            
        },
        components: {
            
        },
        methods: { 
          
        }
    })
</script>

 

3、在vue中使用插槽

<div id="root">
   <child>
       <p>dell</p>
   </child>
   
</div>

<script>
   Vue.component('child',{
       template: `<div>
                    <slot>默认内容</slot>
                </div>`,
   })
</script>

<div id="root">
   <child>
       <p slot="header">dell</p>
       <p slot="footer">kill</p>
   </child>
   
</div>

<script>
   Vue.component('child',{
       template: `<div>
                    <slot nam='header'>默认内容</slot>
                    <p> hello</p>
                    <slot name='footer'>默认内容</slot>
                </div>`,
   })
    var vm  = new Vue({
        el:"#root",
    
    })
</script>

4、vue中的作用域插槽

<div id="root">
   <child>
       <template slot-scope='props'>
            <li>{{props.item}}</li>
       </template>
   </child>
   
</div>

<script>
   Vue.component('child',{
       data: function () {
           return{
               list: [1,2,3,4]
           }
         },
       template: `<div>
                    <ul>
                        <slot
                            v-for="item of list"  
                            :item=item                      
                        >
                        </slot>
                    </ul>
                </div>`,
   })
    var vm  = new Vue({
        el:"#root",
    
    })
</script>

4、动态组件

<div id="root">
   <component :is="type"></component>
   <button @click="handleBtnClick">change</button>
</div>

<script>
   Vue.component('child-one',{
       
       template: '<div>child-one</div>',
   })
   Vue.component('child-two',{
       
       template: '<div>child-two</div>',
   })
    var vm  = new Vue({
        el:"#root",
        data: {
            type:'child-one'
        },
        methods: {
            handleBtnClick:function () {
                this.type = (this.type === 'child-one' ? 'child-two' : 'child-one')
              }
        }
    
    })
</script>

v-once指令可以提高静态内容的展示效果