vue学习——自定义控件，父与子之间的传递

自定义组件可以创建局部的或者全局的

• props：给组件添加属性

<div id="app">
        <run></run>
 </div>
 <script>
     // 注册一个自定义组件 这是全局组件 所有的实例都可以调用 
     Vue.component('run',{
         template:'<h2>这是全局的</h2>'
   })
 
     //创建根实例
     let vm =new Vue({
         el:"#app"
})
 </script>

 <div id="app">
    <run message='这里是局部'></run>
</div>
<script>
let Child={
   props:['message'],
   template:'<span> {{message}} </span>',
}
 var vm =new Vue({
     el:"#app",
     components:{
         //run只能在父模板调用
         'run':Child
     }
 })
</script>

• .$emit()：子类传父类的时候使用

<div id="app">
    <p>{{total}}</p>
     <button-counter v-on:increment="incrementTotal"></button-counter>
     <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
<script>
    Vue.component('button-counter',{
        template:'<button @click="incrementHandler">{{counter}}</button> ',
        data:function(){
           return{
               counter:0
           }
        },
        methods:{
            incrementHandler:function(){
                    this.counter+=1
                    this.$emit('increment')
            }
        }
    })
    new Vue({
        el:"#app",
        data:{
           total:0
        },
        methods:{
     incrementTotal:function(){
         this.total+=1
     }
        }
    })
</script>

• model:{event:’’,prop:’’}
  event 事件 表示 触发哪个事件时调用model
  prop表示 触发事件时 把参数传入

• 插槽