Vue之组件

组件基础 :

组件是可复用的Vue实例, 且带有一个名字.

因为组件是可以复用的Vue实例, 所以它们与new Vue接收相同的选项, 例如: data, computed, watch, methods以及生命周期钩子等. 仅有的例外是像 el 这样根实例特有的选项.

注意事项:

　　data 必须是一个函数

　　父子组件中通过Props向子组件进行传递数据

　　字符组件中通过$emit事件向父组件进行传递数据.

　　　　参数: $emit()中接受的第一个参数是父组件中一个被监听的属性名, 第二个参数是给父组件传递的数据, 数据可以是数组或字典等形式.

基本组件:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.min.js"></script>
</head>
<body>

<div id="d1">
    <global-component></global-component>
</div>

<script>
    // Vue.component("global-component", {
    //     template: "<div><h3>{{w}}</h3><h2>{{w}}</h2></div>",
    //     data(){
    //         return {
    //             w: "hello w"
    //         }
    //     }
    // });
    // new Vue({
    //     el: "#d1",
    //
    // })

    let Header = {
        template: `
            <div>
                <h1>{{g}}</h1>
            </div>
        `,
        data(){
            return {
                g: "hello g"
            }
        },
    };
    let App = {
        template:`
            <div>
                <app-header></app-header>
            </div>`,
        components: {
            "app-header": Header
        }
    };

    new Vue({
        el: "#d1",
        template: `<App></App>`,
        components: {
            "App":App
        }
    })
</script>


</body>
</html>

父子组件:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>父子组件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.min.js"></script>
</head>
<body>

<div id="d1"></div>

<script>
    let son = {
        template: `
            <div><h2>{{f}}</h2></div>
        `,
        props: ["f"]
    };
    let father = {
        template: `
      <div>
        <father v-bind:f="fa"></father>
        </div>
      `,
        components: {
            "father": son
        },
        data() {
            return {fa: "我"}
        }
    };

    new Vue({
        el: "#d1",
        //Vue示例注册组件的入口
        template: `<my-compo></my-compo>`,
        components: {
            "my-compo": father
        }
    })
</script>

</body>
</html>

子父组件:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>子父组件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.min.js"></script>
</head>
<body>

<div id="d1"></div>

<script>

    let son = {
        template:`<div><button @click="son">点我变大</button></div>`,
        methods: {
            son: function () {
                this.$emit("change-size", 0.1)
            }
        }
    };

    let Father = {
        template:`
        <div>
            <span :style="{fontSize: font + 'em'}">变大大~~~~~~</span>
            <my-son v-on:change-size="sizes"></my-son>
        </div>`,
        components: {
            "my-son": son
        },
        data(){
            return {
                font: 1
            }
        },
        methods:{
            sizes: function (value) {
                this.font +=value
            }
        }
    };

    new Vue({
        el: "#d1",
        template: "<Father></Father>",
        components: {
            Father,
        }
    })

</script>

</body>
</html>

混入:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>混入</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.min.js"></script>
</head>
<body>

<div id="d1">
    <!--命名不能使用驼峰命名-->
    <myhead></myhead>
    <my-body></my-body>
</div>

<script>

    let mixs = {
        methods: {
            show: function () {
                console.log(name +"来了")
            },
            hide: function (name) {
                console.log(name+ "去了")
            }
        }
    };

    let myHead = {
        template:`
            <div>
                <button @click="show">点我来啊</button>
                <button @click="hide">点我去啊</button>
            </div>
        `,
        mixins: [mixs]
    };

    let myBody = {
      template: `
        <div>
            <button @mouseenter="show('wang')">点我鼠标来啊</button>
            <button @mouseleave="hide('wang')">点我鼠标去啊</button>
        </div>
      `,
        mixins: [mixs]
    };

    new Vue({
        el: "#d1",
        // template
        components: {
            "myhead": myHead,
            "my-body": myBody,
        }
    })

</script>

</body>
</html>

插槽:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="vue.min.js"></script>
</head>
<body>

<div id="d1">
    <global-component>python</global-component>
    <global-component>linux</global-component>
    <global-component>go</global-component>
    <global-component>java</global-component>
</div>

<script>
    Vue.component("global-component", {
        template:`
            <div><slot></slot></div>
        `
    });

    new Vue({
        el: "#d1"
    })
</script>

</body>
</html>

具名插槽:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>具名插槽</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div id="d1">
    <global-component>
        <!--输出顺序和此处先后顺序相同-->
        <!--使用slot实行进行命名-->
        <div slot="python">python</div>
        <div slot="go">go</div>
        <div slot="linux">linux</div>
        <div slot="java">java</div>
    </global-component>
</div>

<script>

    Vue.component("global-component", {
        template:`
            <div>
                <slot name="python"></slot>
                <slot name="go"></slot>
                <slot name="java"></slot>
                <slot name="linux"></slot>
            </div>
        `,
    });

    new Vue({
        el: "#d1"
    })
</script>

</body>
</html>