zoukankan html css js c++ java

在Vue中使用插槽

组件的template里可以在任意位置添加<slot></slot>,slot为标签，称为插槽，像是一个借口，接受html数据。

具名插槽，slot标签可以添加name属性，用与区分组件中不同插槽

这样在调用组件时就可以在innerHTML里写入对应的html数据

<div slot="header"></div>这样就会把这个标签下的，包括这个标签，所有html元素替换到<slot name="header"></slot>的位置，本质和v-html没什么区别。

<body>
  <div id="root">
    <child content="Dell"></child>
    <child content="Lee"></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(){
          //alert(this.content)
          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'
    })
  </script>
 
</body>

查看全文

相关阅读:
MongoDB Projection
MongoDB 删除文档
 MongoDB 更新文档
 MongoDB 删除文档
 MongoDB 查询文档
 MongoDB 插入文档
 MongoDB 数据类型
 MongoDB 删除集合
 MongoDB 创建集合
 MongoDB 删除数据库

原文地址：https://www.cnblogs.com/tengteng0520/p/12070208.html