组件数据交互

1、组件间数据交互中 props属性及用法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <div>{{pmsg}}</div>
            <!-- 静态绑定
            <!-- <menu-item title='来自父组件的值'></menu-item> -->
            <!-- 动静结合组件  -->
            <!-- <menu-item :title='ptitle' content='hello'></menu-item> -->
            <menu-item :menu-title='ptitle'></menu-item>
        </div>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript">
            Vue.component('menu-item', {
                // props:['title','content'],

                /*
                    组件内部通过props接收传递过来的值   ————> 数组
                    porpos属性命名规则
                        在props中使用驼峰形式，模板中需要使用短横线形式；
                        字符串形式的模板中没有这个限制。
                */
                props: ['menuTitle'],

                // data: function(){
                //  return{
                //      msg: '子组件本身的数据'
                //  }
                // },
                // template: '<div>{{msg + "---" + title + "---" + content}}</div>'

                template: '<div>{{menuTitle}}<third-com testTitle="hello"></third-com></div>'
            });
            
            // 字符串形式的模板中没有这个限制。
            Vue.component('third-com', {
                props: ['testTitle'],
                template: '<div>{{testTitle}}</third-com></div>'
            });
            
            var vm = new Vue({
                el: '#app',
                data: {
                    pmsg: '父组件中的内容',
                    ptitle: '动态属性绑定'
                }
            });
        </script> 
    </body>
</html>

2、子组件向父组件传值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
            <menu-item :parr='parr' @enlarge-text= 'handle'></menu-item>
        </div>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript">
            /*
                子组件向父组件传值-基本用法:
                1、子组件通过自定义事件 向父组件传递信息
                    <button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>
                2、父组件监听子组件事件
                    <menu-item :parr='parr' @enlarge-text= 'handle'></menu-item>
                
                props传递数据原则： 单项数据流（子组件不能像父组件传递值，父组件可像子组件传递值）。
            
            */
            Vue.component('menu-item',{
                props: ['parr'],
                template:`
                <div>
                    <ul>
                        <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
                    </ul>
                    <button @click='parr.push("lemon")'>点击</button>
                    <button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>
                </div>
                `
            });
            var vm = new Vue({
                el: '#app',
                data: {
                    pmsg: '父组件中的内容',
                    parr: ['apple','orange','banana'],
                    fontSize: 10
                },
                methods: {
                    handle: function(){
                        //扩大字体大小
                        this.fontSize += 5;
                    }
                }
            });
        </script>
    </body>
</html>

3、子组件通过自定义事件向父组件传值：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
            <menu-item :parr='parr' @enlarge-text= 'handle($event)'></menu-item>
        </div>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript">
            /*
                子组件通过自定义事件向父组件传值-基本用法:
                1、子组件通过自定义事件 向父组件传递信息
                    <button @click='$emit("enlarge-text",5)'>扩大父组件中字体大小5递加</button>
                2、父组件监听子组件事件
                    <menu-item :parr='parr' @enlarge-text= 'handle($event)'></menu-item>
            
            */
            Vue.component('menu-item',{
                props: ['parr'],
                template:`
                <div>
                    <ul>
                        <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
                    </ul>
                    <button @click='parr.push("lemon")'>点击</button>
                    <button @click='$emit("enlarge-text",5)'>扩大父组件中字体大小5递加</button>
                    <button @click='$emit("enlarge-text",10)'>扩大父组件中字体大小10递加</button>
                </div>
                `
            });
            var vm = new Vue({
                el: '#app',
                data: {
                    pmsg: '父组件中的内容',
                    parr: ['apple','orange','banana'],
                    fontSize: 10
                },
                methods: {
                    handle: function(val){
                        //扩大字体大小
                        //此时的值由子组件传递过来的，而不是由父组件写死的！
                        this.fontSize += val;
                    }
                }
            });
        </script> 
    </body>
</html>

4、非父子组件之间的传值及销毁事件:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <div>父组件</div>
            <div>
                <button @click="handle">销毁事件</button>
            </div>
            <test-tom></test-tom>
            <test-jerry></test-jerry>
        </div>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript">
            /*
                兄弟组件之间数据传递
            */
            // 提供事件中心
            var hub = new Vue();

            Vue.component('test-tom', {
                data: function() {
                    return {
                        num: 0
                    }
                },
                template: `
                <div>
                    <div>TOM: {{num}}</div>
                    <div>
                        <button @click='handle'>点击</button>
                    </div>
                </div>
               `,
                methods: {
                    handle: function() {
                        //触发事件：
                        hub.$emit('jerry-event', 1);
                    }
                },
                mounted: function() {
                    //监听事件
                    hub.$on('tom-event', (val) => {
                        this.num += val;
                    });
                }
            });
            Vue.component('test-jerry', {
                data: function() {
                    return {
                        num: 0
                    }
                },
                template: `
                        <div>
                            <div>JERRY: {{num}}</div>
                            <div>
                                <button @click='handle'>点击</button>
                            </div>
                        </div>
                       `,
                methods: {
                    handle: function() {
                        //触发事件：
                        hub.$emit('tom-event', 2);
                    }
                },
                mounted: function() {
                    //监听事件
                    hub.$on('jerry-event', (val) => {
                        this.num += val;
                    });
                }
            });
            var vm = new Vue({
                el: '#app',
                data: {

                },
                methods: {
                    handle: function() {
                        //销毁事件：
                        hub.$off('tom-event');
                        hub.$off('jerry-event');
                    }
                }
            })
        </script>
    </body>
</html>

5、组件插槽的用法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <alert-box>有bug发生！</alert-box>
            <alert-box>有一个警告！</alert-box>
            <alert-box></alert-box>
        </div>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript">
            /*
            组件插槽
            */
            Vue.component('alert-box', {
                template: `
                    <div>
                        <strong>ERROR</strong>
                        <slot>默认内容</slot>
                    </div>
                `
            })
            var vm = new Vue({
                el: '#app',
                data: {

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

6、具名插槽的用法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <!-- 一般用法： -->
            <base-layout>
                <p slot='header'>标题信息</p>
                <!-- 没匹配到的填充到 默认插头中 -->
                <p>主要内容1</p>
                <p>主要内容2</p>
                <p slot='footer'>底部信息</p>
            </base-layout>
            <br />
            <!-- 复杂点的用法：  -->
            <base-layout>
                <template slot='header'>
                    <p>标题信息1</p>
                    <p>标题信息2</p>
                </template>
                <!-- 没匹配到的填充到 默认插头中 -->
                <p>主要内容1</p>
                <p>主要内容2</p>
                <template slot='footer'>
                    <p>底部信息1</p>
                    <p>底部信息2</p>
                </template>
            </base-layout>
        </div>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript">
            /*
            具名插槽
            */
            Vue.component('base-layout', {
                template: `
                    <div>
                        <header>
                            <slot name='header'></slot>
                        </header>
                        <main>
                            <slot></slot>
                        </main>
                        <footer>
                            <slot name='footer'></slot>
                        </footer>
                    </div>
                `
            })
            var vm = new Vue({
                el: '#app',
                data: {

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

7、作用域插槽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .current{
                color: orange;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <fruit-list :list='list'>
                <!-- 父组件对子组件的内容进行加工处理 -->
                <template slot-scope='slotProps'>
                    <strong v-if='slotProps.info.id==2' class="current">{{slotProps.info.name}}</strong>
                    <span v-else>{{slotProps.info.name}}</span>
                </template>
            </fruit-list>
        </div>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript">
            /*
                作用域插槽“
                    应用场景：父组件对子组件的内容进行加工处理；
            */
            Vue.component('fruit-list', {
                props: ['list'],
                template: `
                <div>
                    <li :key='item.id' v-for='item in list'>
                        <slot :info='item'>{{item.name}}</slot>
                    </li>
                </div>
                `
            });
            var vm = new Vue({
                el: '#app',
                data: {
                    list: [{
                        id: 1,
                        name: 'apple'
                    }, {
                        id: 2,
                        name: 'orange'
                    }, {
                        id: 3,
                        name: 'banana'
                    }]
                }
            });
        </script>
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Vue 组件数据通信方案总结
    前言 组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互...
    开车去环游世界阅读 313评论 0赞 2
  • 04vue2.0-Vue组件化-组件间的数据传递
    Vue组件之间传值 父组件向子组件传值 1.父组件向子组件传值 父组件发送的形式是以属性的形式绑定值到子组件身上。...
    东邪_黄药师阅读 351评论 0赞 0
  • Vue 组件化开发
    组件化开发思想 现实中的组件化思想体现（1）标准（2）分治（3）重用（4）组合 编程中的组件化思想体现 组件化规范...
    辽A丶孙悟空阅读 1,910评论 1赞 19
  • Vue全家桶之组件化开发
    Vue全家桶之组件化开发 一、组件化开发思想 1.现实中的组件化思想体现-模块化手机 2.编程中的组件化思想体现-...
    coder_shen阅读 360评论 0赞 0
  • 组件化开发
    组件化开发思想 标准 分治 重用 组合组件开发规范：Web Components通过封装好功能的定制元素（自定义标...
    zhchhhemmm阅读 246评论 0赞 0