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>

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>

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>

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>

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>

原文地址:https://www.cnblogs.com/gyh412724/p/9931926.html

时间: 11-08

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

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

1.创建组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建组件</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> &l

vue组件父子之间相互通信案例

React 组件基本使用(3) ---父子组件之间的通信

当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件传给它的函数给父组件传递数据. 很简单的一个例子,我们在输入框中输入温度,输入框下面显示冷和热.这里就有两个组件,输入框和它下面的显示内容,且它们共享一个状态,就是温度.所以我们要把温度这个状态放到这两个组件的父组件中.这里就有三个组件,一个输入框TemperatureInput,  一个是显示内容

Vue1.0学习总结(4)———Vue1.0自定义组件、Vue1.0组件之间的通信

Vue自定义组件: 组件:就是一个大的对象:new Vue({})就是一个组件定义一个组件:1.全局组件: <div id="box"> <aaa></aaa> </div> var Aaa=Vue.extend({ template:'<h3>我是一个标题</h3>' }); Vue.component('aaa',Aaa); a)给自定义的组件添加数据: data必须是函数的形式,函数必须返回一个对象(json

组件之间的通信(子组件-改变父组件的值)

在vue中,组件之间的通信,是不建议子组件改变父组件的值,因为一个父组件有可能会有很多子组件,改来改去会很难管理(别人都这样说,我信) 试试: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src='../vue.js'> </script> </head> <bod

vue的全局组件和局部组件

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>全局组件.局部组件</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script></head><body><div id="a

vuejs子组件向父组件传递数据

子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="

Vue.js中全局组件和局部组件的编写差异和注意事项

全局组件的编写方式: <div id='app'> <runoob></runoob> </div> <script> Vue.component('runoob',{ template:'<h1>Hello World!</h1>' }) new Vue({ el:'#app', }) </script> 局部组件的编写方式: <div id='app'> <runoob></r

Vue:全局组件与局部组件

全局组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="seg1"> <alert></alert> </div> <script

四种不同对象的生存方式(栈、堆、全局、局部静态)

[结果分析,引申出四种对象]: 生存方式 执行时机 消亡时机 全局(静态)对象 全局静态存储区global 比程序进入点更早,构造函数先被执行: 程序结束前,其析构函数被执行. 局部静态对象 局部静态存储区local static 在对象诞生时,其构造函数被执行.(注意,此处只会有一个实例产生,而且固定在内存上(非stack也非heap),它的构造函数在控制权第一次移转到其声明处时被调用. 程序将结束时(此对象因而将遭致毁灭)其析构函数才被执行,但比全局对象的析构函数更早一步执行. 局部对象 栈