组件

组件

概念：

html，css于js的集合体，为该集合体命名，用该名字复用html，css于js组成的集合体 =》复用性

组件分类

根组件:
    new Vue({})  <--!生成的组件-->

局部组件：
    组件名 = {},{}内部采用的是vue语法

全局组件：Vue.component('组件名'，{})，{}内部采用的是vue语法

组件的特点

组件都有管理组件html页面结果的template，实列成员，template中有且只有一个根标签
根组件都是作为最顶层父组件，局部于全局组件作为子组件，也可以成为其他局部于全局组件的父组件
子组件的数据需要隔离（数据化组件，每一个组件拥有自己数据的独立名称空间）
局部组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件
组件中出现的所有变量（模板中，逻辑中）由该组件自己提供管理
局部全局和根组件都是一个vue实列，一个实列对应一套html，css，js结构，所以实列就是组件

根组件

根组件可以不明确template，template默认采用挂载点页面结构；如果设置了template，挂载点内部的内容无效，因为回被替换

注意：html，body标签不能被替换，所以不能作为挂载点

子组件

声明局部组件：局部组件要在其父组件中注册才能使用

1、声明组件 2、注册组件 3、渲染组件 => 全局组件不需要注册

 let localTag = {
        template: `
        <div class="box" @click="fn">
            <img src="img/001.jpg" alt="">
            <h2>美女</h2>
        </div>
        `,
        methods: {
            fn() {
                console.log(this)
            }
        }
    };

    Vue.component('global-tag', {
        template: `
        <div class="box" @click="fn">
            <img src="img/002.jpg" alt="">
            <h2>大长腿</h2>
        </div>
        `,
        methods: {
            fn() {
                console.log(this)
            }
        }
    });

    new Vue({
        el: '#app',
        data: {},
        components: {  // 注册组件
            localTag,
        }
    })

组件传参


<--!父传子-->
<body>
    <div id="app">
    <div class="wrap">
        <local-tag v-for="dog in dogs" :dog="dog" def="12345" :xyz="dog.name"></local-tag>
    </div>
</div>

</body>


<script>
let localTag = {
        props: ['dog', 'def', 'xyz'],
        template: `
        <div class="box" @click="fn">
            <img :src="dog.img" alt="">
            <h2>捶{{ dog.name }}{{ count}}下</h2>
            <!--<h3>{{ abc }}</h3>-->
            <!--<h3>{{ def }}</h3>-->
            <!--<h3>{{ xyz }}</h3>-->
        </div>
        `,
        data() {
            return {
                count: 0,
            }
        },
        methods: {
            fn() {
                console.log(this.dog);
                this.count++;
            }
        }
    };

    new Vue({
        el: '#app',
        data: {
            dogs,
        },
        components: {
            localTag,
        }
    });

</script>

<--!子传父-->

<body>
   <div id="app">
      <h1>{{ h1 }}</h1>
      <h3>{{ h3 }}</h3>


   <!--自定义组件标签的事件自定义事件是属于子组件的，子组件在父组件中渲染并绑定事件方法，
       所以事件方法由父组件来实现

       子组件如何触发自定义事件：this.$emit('自定义事件名', 触发事件回调的参数们)

       子组件触发自定义事件，携带出子组件的内容，在父组件中实现自定义事件的方法，拿到子组件传递给父       组件的消息
        -->
        <tag @action="actionFn"></tag>

    </div>
</body>
<script>
    let tag = {
        template: `
        <div>
            <input type="text" v-model="t1">
            <input type="text" v-model="t2">
            <button @click="changeTitle">修改标题</button>
        </div>
        `,
        data() {
            return {
                t1: '',
                t2: '',
            }
        },
        methods: {
            changeTitle() {
                if (this.t1 && this.t2) {
                    // console.log(this.t1, this.t2);
                    this.$emit('action', this.t1, this.t2);
                    this.t1 = '';
                    this.t2 = '';
                }
            }
        }
    };

 new Vue({
        el: '#app',
        data: {
            h1: '主标题',
            h3: '子标题'
        },
        components: {
            tag,
        },
        methods: {
            actionFn(a, b, c) {
                // console.log('触发了', a, b, c);
                this.h1 = a;
                this.h3 = b;
            },
        })
</script>

组件

vue组件

组件

概念：

组件分类

组件的特点

根组件

子组件

组件传参