87 全局和局部组件, 子父和父子之间的通信 混入 插槽 路飞导航栏

Posted gyh412724

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了87 全局和局部组件, 子父和父子之间的通信 混入 插槽 路飞导航栏相关的知识，希望对你有一定的参考价值。

主要内容:

1  全局组件:

　　a : 定义一个全局组件

   Vue.component(
        ‘global-component‘, {
            template: `<div>          注意:  template一定要包一层div
                <h3>{{wanrong}}</h3>
                <h2>{{wanrong}}</h2>
                        </div>`,
            data() {
                return {
                    wanrong: ‘hello‘,
                }
            }
        }
    );

　　2  全局组件的使用的两种方式:

　　　　a:  写在实例中:

    new Vue({
        el: ‘#app‘,
        //如果写在下面, 则找到tmplate标签, 把它当做跟标签.渲染,
        template:`<global-component></global-component>`

    })

　　　　b : 写在标签里:

<div id="app">
    <!--如果写在上面, 则以id为app的div为根标签-->
    <global-component></global-component>
</div>

　　　　两种方式的区别:  如果写在实例中, 直接显示组件中的template, 如果写在div中, 多了一个以id为app的div标签

2  局部组件的应用:

　　a:  先创建一个对象:

  let Header = {
        template:`<h1>{{greeting}}</h1>`,
        data(){
            return{
                greeting: ‘hello‘
            }
        }
    };

　　b : 为了更加的符合规范, 创建了一个app对象, 作为程序入口

    let App = {
        //3使用子组件
      template: `
        <div>
        <app-header"></app-header>
        </div>
      `  ,
        //2在父组件中注册子组件
        components:{
          ‘app-header‘: Header
        }

    };

　　c: 实例

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

　　流程:先创建两个对象, Header, App, 然后创建一个Vue实例, 注册组件App作为程序的入口, 为了使程序更加的规范 ,

然后,在实例中使用组件,   接着走到app组件, 在父组件中注册子组件, 使用子组件, 然后找到Header的template渲染.

3 父子组件之间的通信,

　　a  : 父亲传递一个数据给孩子, 孩子接受数据使用props

　　b : 实例:

<div id="app"></div>
<script>
    //1创建一个obj
    let Header = {
        template:`<div>
                        <h1>{{greeting}}</h1>
                        <h2>{{fData}}</h2>
                   </div>`,
        //在子组件中用props接收父组件传过来的参数
        props:[‘fData‘],
        data(){
            return{
                greeting: ‘hello‘
            }}};
    let App = {
        //3使用子组件
      template: `
        <div>
        <app-header v-bind:fData="fatherData"></app-header>
        </div>
      `  ,
        //2在父组件中注册子组件
        components:{
          ‘app-header‘: Header
        },
        data(){
          return {
              fatherData:0
          }}};
    new Vue({
        el:‘#app‘,
        template:  `<App></App>`,
        components:{
            App
        }})
</script>
</body>

4 子父之间的通信,

　　a : emit触发一个函数的执行, 还可以传参数给父组件, 父组件用于监听, 

　　b : 实例:

技术分享图片 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="static/vue.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
    //1创建一个obj
    let Header = {
        template: `<div>
                        <h1>hello</h1>
                        <button v-on:click="sonClick">点击让字体变大</button>
                   </div>`,
        methods: {
            sonClick: function () {
                this.$emit(‘change-Size‘, 0.1)
            }
        }
    };

    let App = {
        //3使用子组件
        template: `
        <div>
        <span :style="{fontSize: postFontsize + ‘em ‘}">春暖花开</span>
        <app-header v-on:change-Size="fatherClick"></app-header>
        </div>
      `,
        //2在父组件中注册子组件
        components: {
            ‘app-header‘: Header
        },
        data() {
            return {
                postFontsize: 1
            }
        },
        methods: {
            fatherClick: function (value) {
                this.postFontsize += value
            }
        }
    };
    new Vue({
        el: ‘#app‘,
        template: `<App></App>`,
        components: {
            App
        }
    })
</script>
</body>
</html>
View Code

 

5 组件系统之混入:假如两个对象中都用到了一个方法, 可以把这个方法提取出来, 定义一个mixs对在用到的地方: mixins:[mixs]

技术分享图片 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="static/vue.min.js"></script>
</head>
<body>
<div id="app"></div>


    // <!--第一版, 因为代码重复, 所以引入了混入-->
    let mixs = {
           methods:{
            show: function (name) {
                console.log(name + 1)
            },
            hide: function (name) {
                console.log(name + 0)
            }
        }
    };
    let wanrong = {
        template:`<div>
                        <button v-on:click="show(‘wanrong‘)">点击显示蓉蓉1</button>
                        <button v-on:click="hide(‘wanrong‘)">点击显示蓉蓉0</button>
                    </div>`,
        mixins:[mixs]
    };
    let ningning = {
        template: `<div>
                        <button v-on:click="show(‘ningning‘)">点击显示宁宁1</button>
                        <button v-on:click="hide(‘ningning‘)">点击显示宁宁0</button>
                    </div>`,
        mixins:[mixs]
    };
    let App = {
        template:`<div>
                        <my-wanrong></my-wanrong>
                        <my-ningning></my-ningning>
                    </div>`,
        components:{
            ‘my-wanrong‘: wanrong,
            ‘my-ningning‘: ningning
        }
    };
    new Vue({
        el: ‘#app‘,
        template:`<div>
                        <App></App>
                    </div>`,
        components:{
            ‘App‘: App
        }

    })
</script>
</body>
</html>
View Code

 6 组件系统之插槽:  可以放多个标签:  <slot></slot>

技术分享图片 
    <script src="static/vue.min.js"></script>
    <style>
        .body {
            margin: 0;
        }
        .box {
            width: 80px;
            height: 50px;
            background-color:paleturquoise;
            float: left;
            line-height: 50px;

        }
    </style>
</head>
<body>
<div id="app" >
    <global-component>首页</global-component>
    <global-component>免费课程</global-component>
    <global-component>轻课</global-component>
    <global-component>智能题库</global-component>
    <global-component>学位课程</global-component>
    <global-component>咨询</global-component>
</div>
<script>
    //定义一个全局的组件
    //插槽就是可以放多个标签
    Vue.component(‘global-component‘, {
        template:`<div class="box"><slot></slot></div>`
    });
    new Vue({
        el: ‘#app‘,
    })
</script>
View Code

7 组件系统之具名插槽:  为每个插槽起具体的名字

技术分享图片 
    <script src="static/vue.min.js"></script>
    <style>
        body {
            margin:0;
        }
        .box {
            width:80px;
            height:50px;
            background-color: paleturquoise;
            float: left;
            margin-left: 5px;
        }
    </style>
</head>
<body>
<div id="app" >
    <global-component>
        <div slot="home">首页</div>
        <div slot="lightcourse">轻课</div>
        <div slot="degreecourse">学位课程</div>
    </global-component>
</div>
<script>
    //定义一个全局的组件
    Vue.component(‘global-component‘, {
        template:`<div class="box">
                        <slot name="lightcourse"></slot>
                        <slot name="degreecourse"></slot>
                        <slot name="home"></slot>
                    </div>`
    });
    new Vue({
        el: ‘#app‘,
    })
</script>
View Code

8 template格式, 就是把对象中的template单独隔离出来,

<body>
    <div id="app"></div>
    <template id="header">
        <div>
            <h1>Hello Vue</h1>
        </div>
    </template>
    <script>
        let Header = {
            template: ‘#header‘
        };
        new Vue({
            el: ‘#app‘,
            template:`<div><app-header></app-header></div>`,
            components:{
                ‘app-header‘: Header
            }
        })
    </script>
</body>

9 组件系统之路飞导航栏

技术分享图片 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="static/vue.min.js"></script>
      <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .header {
            position: fixed;
            top:0;
            left:0;
            width:100%;
        }
          .el-menu {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .footer {
            position: fixed;
            bottom:0;
            left:0;
            width:100%;
        }
        .header img {
            position: absolute;
            left: 80px;
            top: -4px;
            width:118px;
            height: 70px;
            z-index:999
        }
    </style>
</head>
<body>
<div id="app">

</div>
<!--导航头-->
<template id="header">
    <div class="header">
        <img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg"/>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"  @select="handleSelect"
  background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">>
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">免费课程</el-menu-item>
            <el-menu-item index="3">轻课</el-menu-item>
            <el-menu-item index="4">学位课程</el-menu-item>
            <el-menu-item index="5">智能题库</el-menu-item>
            <el-menu-item index="6">公开课</el-menu-item>
            <el-menu-item index="7">内部教材</el-menu-item>
            <el-menu-item index="8">老男孩教育</el-menu-item>
        </el-menu>
    </div>
</template>


<!--导航尾部-->
<template id="footer">
    <div class="footer">
        <el-menu  class="el-menu-demo" mode="horizontal"
  background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">>
            <el-menu-item index="1">关于我们</el-menu-item>
            <el-menu-item index="2">联系我们</el-menu-item>
            <el-menu-item index="3">商业合作</el-menu-item>
            <el-menu-item index="4">帮助中心</el-menu-item>
            <el-menu-item index="5">意见反馈</el-menu-item>
            <el-menu-item index="6">新手指南</el-menu-item>
        </el-menu>
    </div>
</template>
<script>
    let Header = {
        template: "#header",
        data() {
            return {
                activeIndex: 0
            };
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    };

    let Footer = {
      template:‘#footer‘,

    };

    new Vue({
        el: "#app",
        template: `<div>
                        <app-header></app-header>
                        <app-footer></app-footer>
                    </div>
`,
        components: {
            "app-header": Header,
            ‘app-footer‘: Footer
        }
    })
</script>

</body>
</html>
View Code

 

以上是关于87 全局和局部组件, 子父和父子之间的通信 混入 插槽 路飞导航栏的主要内容，如果未能解决你的问题，请参考以下文章

vue.js 创建组件 子父通信 父子通信 非父子通信

vue组件间通信

父子组件

03组件化开发父子组件通信

vue组件化编程父子组件通信

vue组件化编程父子组件通信