专栏首页Python 学习day87-Vue基础-组件注册、组件通信、组件混入、组件插槽
原创

day87-Vue基础-组件注册、组件通信、组件混入、组件插槽

01.Vue组件系统之全局组件的注册

<body>
<div id="app"></div>
</body>
<script>
    // Vue注册组件,固定使用格式
    Vue.component("global-component",{
        template: `<div>
                <h3>{{ leon }}</h3>
            <\div>`,
        data(){
            return {
                leon: 'Hello Leon'
            }
        }
        },
    );
    // 找到元素并渲染进去
    new Vue({
        el: '#app',
        template: `<global-component></global-component>`  // 使用模板
    })
</script>

02.Vue组件系统之组件的复用

<body>
<div id="app">
    <global-component></global-component>
    <global-component></global-component>
    <global-component></global-component>
</div>
</body>
<script>

    Vue.component('global-component', {
        template: `<div>
                <h1>{{ content }}</h1>
                   </div>`,
        data(){
            return{
                content: 'Hello Vue!'
            }
        }
    });

    new Vue({
        el: '#app',
    })
</script>

03.Vue组件系统之局部组件

    <style>
        .header {
            width: 100%;
            height: 50px;
            background-color: cornflowerblue;
        }
    </style>
</head>
<body>
<div id="app"></div>
</body>
<script>
    // 写一个局部组件
    let Header = {
        template: `<div class="header">
            <h1>{{ greeting }}</h1>
        </div>
        `,
        data() {
            return {
                greeting: '这是局部组件'
            }
        }
    };

    new Vue({
        el: '#app',
        // 模板固定使用格式
        template: `<app-header></app-header>`,
        components: {
            // 将局部组件注册进来
            'app-header': Header
        }
    })

</script>

04.无

05.Vue组件系统之父子组件的通信

<body>
<div id="app"></div>
</body>
<script>

    //定义一个局部组件
    let Header = {
        template: `
            <div>
                <h2>{{ greeting }}</h2>
                <h2>{{ fData }}</h2>
            </div>
        `,
        props: ['fData'],  // step2: 固定格式,从父组件那里得到数据
        data() {
            return {
                greeting: '应用数据示例'
            }
        }
    };

    //定义父亲组件
    let  App = {
        // step1: 给子组件绑定一个FData的属性
        template: `
            <div>
                <app-header v-bind:fData="fatherData"></app-header>
            </div>
        `,
    //在父组件里面注册局部组件
    components: {
            'app-header': Header  // 'app-header'名字自定义,将 Header 注册进去即可
        },
    data(){
            // 定义fatherData
            return {
                fatherData: 0
            }
        }
    };
    //全局注册
    new Vue({
        el: '#app',
        template: `<App></App>`,
        components: {
            App      //将父组件注册进去
        }
    })

</script>

06.Vue组件系统子父组件的通信

<body>
<div id="app"></div>
</body>
<script>
    // 子组件
    let Header = {
        template: `
            <div>
                <button @click="sonClick">点击我改变字体大小</button>
            </div>
        `,
        methods: {
            sonClick: function () {
                this.$emit('change-size', 0.1)  // step1: $emit 固定使用格式
            }
        }
    };

    // 父组件
    let App = {
        // step2: v-on 使事件处于被监控状态
        template: `
            <div>
                <span :style="{ fontSize: postFontSize + 'em' }">我是你 爸爸</span>
                <my-header v-on:change-size="fatherClick"></my-header>
            </div>
        `,
        // 注册子组件进父组件
        components: {
            'my-header': Header
        },
        data(){
            return{
                postFontSize: 1   // 默认此时的 字体大小是 1
            }
        },
        methods: {
            fatherClick: function (value) {  // step3: value 自动从子组件那里接受
                this.postFontSize += value
            }
        }
    };

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

07.Vue组件系统之混入

<div id="app">
    <my-leon></my-leon>
    <my-bob></my-bob>
</div>
</body>
<script>
    let mixs = {    // 组件里面放置 methods,用来给下面替换
        methods: {
            show: function (name) {
                console.log(name + '来了')
            },
            hide: function (name) {
                console.log(name + '走了')
            }
        }
    };

    let Leon = {
        template: `
            <div>
                 <button @click="show('Leon')">点击显示Leon来了</button>
                 <button @click="hide('Leon')">点击显示Leon走了</button>
            </div>
        `,
        mixins: [mixs]  // 替换原来的 methods
    };


    let Bob = {
        template: `
            <div>
                <div>
                    <button @mouseenter="show('Bob')">鼠标移入显示Bob来了</button>
                    <button @mouseleave="hide('Bob')">鼠标移出显示Bob走了</button>
                </div>
            </div>
        `,
        mixins: [mixs]  // 替换原来的 methods
    };
    new Vue({
        el: '#app',
        components: {
            'my-leon': Leon,
            'my-bob': Bob
        }
    })

</script>

08.Vue组件系统之插槽

<body>
<div id="app">
    <global-component>Python</global-component>
    <global-component>Java</global-component>
    <global-component>C#</global-component>
</div>
</body>
<script>
    Vue.component('global-component', {
        // <slot></slot>标签,可以用来作其它的填充替换
       template: `
            <div><slot></slot></div>
       `
    });
    new Vue({
        el: '#app',
    })
</script>

09.Vue组件系统之具名插槽

    <style>
        body {
            margin: 0;
        }
        .box {
            width: 50px;
            height: 50px;
            background-color: cornflowerblue;
            float: left;
            margin-left: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <global-component>
            <div slot="home">首页</div>
            <div slot="lightcourses">轻课</div>
            <div slot="degreecourses">学位课程</div>
        </global-component>

    </div>
<script>
    Vue.component("global-component", {
        template: `
            <div class="box">
                <slot name="lightcourses"></slot>
                <slot name="degreecourses"></slot>
                <slot name="home"></slot>
            </div>
        `
    });

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • day86-ES6一般的语法和Vue的认识

    少年包青菜
  • 前端-part8-jQurey操作样式一:获取标签属性+修改标签属性

    少年包青菜
  • day130-day132requests+selenium&线程池&scrapy安装

    少年包青菜
  • Vue 组件详解

    Vue 组件的模板在某些情况下会收到 HTML 的限制,比如 <table> 内规定只允许是 <tr>、<td> 等这些表格元素,所以在 <table> 内直接...

    前端博客 : alili.tech
  • React 组件数据流 && 组件间沟通

    使用React我们首先要知道如何传递数据,组件如何沟通,才能展示我们想要的数据。下面的列子都是使用ES6语法,不懂的同学需要先学习ES6语法。

    前端博客 : alili.tech
  • vue组件详解(四)——使用slot分发内容

    一、什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer><...

    柴小智
  • 【Vue进阶】手把手教你在 Vue 中使用 JSX

    JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个...

    GopalFeng
  • box-sizing

            在通常的网页布局都是由一个个div等元素构成盒子形成形形色色的网页结构,在网页的构成中我们还要进行各种元素的修饰,叫做:盒子模型.

    十月梦想
  • React 开发要知道的 34 个技巧

    原理:子组件里面利用 props 获取父组件方法直接调用,从而改变父组件的值 注意: 此方法和 props 大同小异,都是 props 的应用,所以在源码中没有...

    1024 FED
  • React 开发必须知道的 34 个技巧【近1W字】

    React 是前端三大框架之一,在面试和开发中也是一项技能; 本文从实际开发中总结了 React 开发的一些技巧技巧,适合 React 初学或者有一定项目经验的...

    火狼1

扫码关注云+社区

领取腾讯云代金券