zoukankan      html  css  js  c++  java
  • vue组件数据传递

    1.父组件向子组件传递数据:通过props

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>vue组件的使用</title>
        <style>
            body{
                color:burlywood;
            }
            .header{
                 100%;
                height: 40px;
                background-color: #333;
                line-height: 40px;
                text-align: center;
            }
            .aside{
                20%;
                height: 1200px;
                background-color:chocolate;
                float: left;
            }
            .content{
                80%;
                height: 1200px;
                background-color:crimson;
                float: left;
            }
            .footer{
                 100%;
                height: 40px;
                background-color:darkcyan;
                text-align: center;
                line-height: 40px;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id='app'></div>
        <script>
            // 声明组件
            var Vheader = {
                template : `
                    <div class='header'>
                        头部区域
                    </div>
                `,
            }
            var Vaside = {
                template : `
                    <div class='aside'>
                        侧边栏区域
                    </div>
                `,
            }
            var Vcontent = {
                // 6.在标签中使用props中的数据
                // 通过props传递数据时,若使用了v-for,必须绑定key
                template : `
                    <div class='content'>
                        <ul>
                            <li v-for='(title,index) in titles' :key = 'index'>
                                <h3>{{title}}</h3>
                            </li>
                        </ul>
                    </div>
                `,
                // 5.通过props从父组件中拿到数据
                props:['titles'],
            }
            var Vfooter = {
                template : `
                    <div class='footer'>
                        脚部内容
                    </div>
                `,
            }
            var Vmain = {
                // 4.在当前组件中绑定属性,将从父组件中拿到的数据传入自己的子组件中
                template : `
                    <div class='main'>
                        <Vheader/>
                        <Vaside/>
                        <Vcontent :titles = 'titles'/>
                        <Vfooter/>
                    </div>
                `,
                components:{
                    Vheader,
                    Vaside,
                    Vcontent,
                    Vfooter,
                },
                // 3.通过props从当前组件的父组件拿数据
                props:['titles'],
            }
            new Vue({
                el:'#app',
                // 1.在data中声明数据
                data(){
                    return{
                        titles:['标题一','标题二','标题三','标题四'],
                    }
                },
                // 使用组件
                // 2.在父组件中绑定属性,将data中的数据传到子组件中
                template:`
                    <Vmain :titles = 'titles'></Vmain>
                `,
                // Vue实例化对象的template中需要一个包裹所有元素的根元素,否则会报错
                // 挂载组件
                components:{
                    Vmain,
                }
            })
        </script>
    </body>
    </html>

    2.子组件向父组件传递数据:通过自定义事件

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>vue组件的使用</title>
        <style>
            body{
                color:burlywood;
            }
            .header{
                 100%;
                height: 40px;
                background-color: #333;
                line-height: 40px;
                text-align: center;
            }
            .aside{
                20%;
                height: 1200px;
                background-color:chocolate;
                float: left;
            }
            .content{
                80%;
                height: 1200px;
                background-color:crimson;
                float: left;
            }
            .footer{
                 100%;
                height: 40px;
                background-color:darkcyan;
                text-align: center;
                line-height: 40px;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id='app'></div>
        
        <script>
            var Vheader = {
                template : `
                    <div class='header'>
                        头部区域
                    </div>
                `,
            }
            var Vaside = {
                // 1.在html标签中绑定原生js事件
                template : `
                    <div class='aside'>
                        工具
                        <br/>
                        <button @click='addFontSize'>字体+</button>
    
                    </div>
                `,
                methods:{
                    // 2.在methods中声明所使用的方法
                    addFontSize(){
                        // 3.调用内建的this.$emit()方法触发父组件的自定义事件
                        // this.$emit()方法,可传入两个参数,第一个参数时事件名称,第二个参数是传入事件的参数
                        this.$emit('addFontSize');
                    }
                },
            }
            var Vcontent = {
                template : `
                    <div class='content'>
                        <ul>
                            <li v-for='(title,index) in titles' :key = 'index'>
                                <h3>{{title}}</h3>
                            </li>
                        </ul>
                    </div>
                `,
                props:['titles'],
            }
            var Vfooter = {
                template : `
                    <div class='footer'>
                        脚部内容
                    </div>
                `,
            }
            var Vmain = {
                // 5.在template中绑定自定义事件传给子组件
                template : `
                    <div class='main' :style='{fontSize:fontSize+"px"}'>
                        <Vheader/>
                        <Vaside @addFontSize='addFontSize'/>
                        <Vcontent :titles = 'titles'/>
                        <Vfooter/>
                    </div>
                `,
                components:{
                    Vheader,
                    Vaside,
                    Vcontent,
                    Vfooter,
                },
                // 注意:data必须是一个函数
                data(){
                    return {
                        fontSize:16,
                    } 
                },
                methods:{
                    // 4.在methods中自定义事件
                    addFontSize(){
                        this.fontSize += 1;
                    }
                },
                props:['titles'],
            }
            new Vue({
                el:'#app',
                data(){
                    return{
                        titles:['标题一','标题二','标题三','标题四'],
                    }
                },
                template:`
                    <Vmain :titles = 'titles'></Vmain>
                `,
                components:{
                    Vmain,
                }
            })
        </script>
    </body>
    </html>
    

      3.平行组件通信:创建bus实例,通过bus挂载($on)和调用($emit)事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <App></App>
        </div>
        <script src="./vue.js"></script>
        <script>
            //1.实例化一个bus对象
            const bus = new Vue();
            // 中央事件总线 bus
            Vue.component('B', {
                data() {
                    return {
                        count: 0
                    }
                },
                template: `
                    <div>{{count}}</div>
                `,
                created(){
                    // 2. $on 绑定事件
                    bus.$on('add',(n)=>{
                        this.count+=n;
                    })
                }
            })
    
            Vue.component('A', {
                template: `
                    <div>
                     <button @click='handleClick'>加入购物车</button> 
                    </div>
                `,
                methods:{
                     handleClick(){
                        // 3.触发绑定的函数 // $emit 触发事件
                         bus.$emit('add',1);
                     }
                }
            })
            const App = {
                template: `
                    <div>
                        <A></A>
                        <B></B>
                    </div>
                `,
            }
            new Vue({
                el: '#app',
                components: {
                    App
                }
            })
        </script>
    </body>
    
    </html>

    4.嵌套组件通信,父组件 provide来提供变量,然后再子组件中通过inject来注入变量.无论组件嵌套多深

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            <App></App>
        </div>
        <script src="./vue.js"></script>
        <script>
            Vue.component('B', {
                data() {
                    return {
                        count: 0
                    }
                },
                inject:['msg'],
                created(){
                    console.log(this.msg);
                },
                template: `
                    <div>
                        {{msg}}
                    </div>
                `,
            })
    
            Vue.component('A', {
                created(){
                    console.log(this);   
                },
                template: `
                    <div>
                         <B></B>
                    </div>
                `
            })
            const App = {
                data() {
                    return {
                        title:"老爹"
                    }
                },
                provide(){
                    return {
                        msg:"老爹的数据"
                    }
                },
                template: `
                    <div>
                        <A></A>
                    </div>
                `,
            }
            new Vue({
                el: '#app',
                components: {
                    App
                }
    
            })
        </script>
    </body>
    
    </html>

    5.$parrent $children 

  • 相关阅读:
    八数码难题 (codevs 1225)题解
    小木棍 (codevs 3498)题解
    sliding windows (poj 2823) 题解
    集合删数 (vijos 1545) 题解
    合并果子 (codevs 1063) 题解
    等价表达式 (codevs 1107)题解
    生理周期 (poj 1006) 题解
    区间 (vijos 1439) 题解
    区间覆盖问题 题解
    种树 (codevs 1653) 题解
  • 原文地址:https://www.cnblogs.com/shannen/p/12492121.html
Copyright © 2011-2022 走看看