vue 组件,定义模板方式,render函数

全局组件

Vue.component("name",Object)
name:表示组件的名称
Object:表示一个对象,和vue实例的对象一样具有完整的生态系统

<div id="app">
      <btn><btn>
</div>

Vue.component('btn',{
      template:"<button @click="add">{{num}}</button>",
      data:function(){
            return {
                  num:0
            }
      },
      methods:{
            add(){
                  this.num++
             }
      }
})
//实例化vue
var vm = new Vue({
    el:"#app"
})

局部组件

局部组件需要在实例化对象中通过components属性进行注册

<div id="app">
      <btn><btn>
</div>

var btn = {
    template:"<button @click="add">{{num}}</button>",
    data(){
        return{
            num=0;
        }
    },
    methods:{
        add(){
             this.num++
        }
    }
}
//实例化vue,并注册组件
var vm = new Vue({
     el:"#app",
     components:{
          btn
      }
})

定义模板的方式

1.直接书写在template中,具体参考上面的写法

2.写在script标签中

<script type="text/template" id="tm">
      <div>我是写在script标签里面的模板</div>
</script>
//声明局部组件
var test = {
    template:"#tm"
}
//
new Vue({
    el:"#app",
    components:{
        test;//注册组件
    }
})

3.声明变量

let tem = ` <div>我是在组件外部定义的模板</div>` ;

//局部组件
var test={
    template:tem
}

//实例化 Vue
new Vue({
    el:"#app",
    components:{
        test;//注册组件
    }
})

render函数

除了使用模板template外,在一些场景中，你真的需要 JavaScript 的完全编程的能力，这时你可以用 render 函数，它比 template 更接近编译器。
render:function(createElement)
createElement(tag,{style:{}},[]]),接收三个参数,第一个是字符串,编写创建元素的标签,第二个是对象,存放样式,第三个是数组,存放渲染的数据和插槽

格式

render:function(createElement){
     return createElement('el',{
          //样式
          style:{
          }
    },[ ]
}

示例

<div id="app">
    <test><test>
</div>


        Vue.component("test",{
            render:function(createElement){
                return createElement('div',{
                    style:{
                        width:"100%",
                        height:'200px',
                        border:'1px solid #666',
                        textAlign:"center"
                    }
                },[
                    this.msg
                ])
            },
            data(){
                return{
                    msg:"我是render函数渲染出来的"
                }
            }
        })

        var vm = new Vue({
            
        }).$mount('#app')

render里面设置插槽

<div id="app">
    <test>
        <!-- 插入无名插槽里的内容 -->
        <p>我是插到无名插槽内的内容</p>
        <!-- 插到具名插槽的内容 -->
        <template v-slot:footer>
            <p>我是插到footer里面的内容</p>  
        </template>
        <template v-slot:header>
            <p>我是插到header里面的内容</p>
        </template>
    </test>
</div>

<script>
    Vue.component("test",{
        render:function(createElement){
            return createElement('div',{
                style:{
                    width:"100%",
                    height:'200px',
                    border:'1px solid #666',
                    textAlign:"center"
                }
            },[
                this.$slots.default,//无名插槽
                this.$slots.footer//具名插槽
                createElement("div",this.$slots.header)//创建一个被div包裹的插槽

            ])
        }
    })

    var vm = new Vue({
        
    }).$mount('#app')
</script>