vue.js自定义组件

组件的本质是一个预定义的实例

组件的运用可以使项目开发过程中相同的部分模块化，是可以复用的vue实例

今天我们实现一个计数器组件，第一种方式，用传参实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义组件</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <!-- 组件就是一个预定义的实例 -->
    <div id="app">
        <!-- 定义一个button-counter的组件 -->
        <button-counter title="标题1:"></button-counter>
        <!-- 组件的复用，封闭-->
        <button-counter title="标题2:"></button-counter>
    </div>

    <script>
        //componet函数创建button-conter组件
       Vue.component('button-counter',{
           props:['title'],//定义属性
           data:function(){
               return {count:0}
           },
           //模板内容template
           //外层包裹div可以使用多个标签
           template:'<div><h5>h1...</h5><button v-on:click="count++">{
   
   {title}}you click me{
   
   {count}}times.</button></div>'
       })
       var vm=new Vue({
           el:'#app',
           data:{
           }
       })
    </script>
</body>
</html>

结果：
在这里插入图片描述
第二种，调用函数的方式clickfun

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义组件</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <!-- 组件就是一个预定义的实例 -->
    <div id="app">
        <!-- 定义一个button-counter的组件 -->
        <button-counter title="标题1:" @clicknow='clicknow'><!--调用函数-->
            <h2>111111111</h2>
        </button-counter>
        <!-- 组件的复用，封闭-->
        <button-counter title="标题2:"></button-counter>
    </div>

    <script>
        //componet函数创建button-conter组件
        Vue.component('button-counter', {
            props: ['title'],//定义属性
            data: function () {
                return { count: 0 }
            },
            //模板内容template
            //外层包裹div可以使用多个标签
            template: '<div><h5>h1...</h5><button v-on:click="clickfun">{
   
   {title}}you click me{
   
   {count}}times.</button><slot></slot></div>',
                //slot标签声明一个插槽，可以插入内容，比如是上面的<h2>111111111</h2>
            methods: {
                clickfun: function () {
                    this.count++;
                    this.$emit('clicknow',this.count);//(函数名称，参数)
                }
            }
        })
        
        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods:{//用methods属性去声明clicknow这个方法
            clicknow:function(e){
                console.log(e);
            }
        }
        })
    </script>
</body>

</html>

结果：
在这里插入图片描述

猜你喜欢