问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue动态组件兄弟间传值

头像
少说多做
    314
    头像
    清蒸不是水煮
      3.1k21026
      新手上路，请多包涵

      图片描述

      希望新增加的滑动条的开始值是上一个滑动的结束值。
      以下是具体代码。望解惑。

      <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui@1.4.5/lib/theme-default/index.css">
    <script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@1.4.5/lib/index.js"></script>
    <style type="text/css">
    ul,
    li {
        list-style: none;
    }
    </style>
</head>

<body>
    <div id="app">
        <div style="width: 300px;margin:0 auto;">
            <el-button type="default" @click="add">增加</el-button>
            <el-button type="primary">保存</el-button>
        </div>
        <ul>
            <li v-for="item in items" style="width: 1000px;margin:10px auto;">
                <my-component :item="item"></my-component>
                <el-button type="button" @click="remove(item)">remove</el-button>
            </li>
        </ul>
        <div>{{ items }}</div>
    </div>
    <script type="text/javascript">
    var Child = {
        template: `<span>
                     <el-slider v-model="item.time" 
                     :format-tooltip="formatTooltip"
                     :max=96
                     range
                     show-stops
                     ></el-slider>
                    <el-select v-model="item.value" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                    </el-select>
                    </span>`,
        data: function() {
            return {
                options: [{
                    value: 's',
                    label: '尖'
                }, {
                    value: 'p',
                    label: '高'
                }, {
                    value: 'f',
                    label: '平'
                }, {
                    value: 'v',
                    label: '谷'
                }],
                label: ""
            }
        },
        props: ['item'],
        methods: {
            formatTooltip(val) {
                var minutes = val * 15;
                var hour = Math.floor(minutes / 60);
                var hour = hour < 10 ? "0" + hour : hour
                var minute = minutes % 60;
                var minute = minute < 10 ? "0" + minute : minute
                var output = hour + ":" + minute;
                return output;
            }
        }
    }

    new Vue({
        el: '#app',
        data: {
            items: [{
                value: null,
                time:1
            }]
        },
        components: {
            'my-component': Child
        },
        // watch: {
        //     items: function (val, oldVal) {
        //       console.log(val.slice(0,val.length)[1].time, val.slice(0,val.length)[1].time)
        //     }
        // },
        methods: {
            add() {
                this.items.push({
                    value: null,
                    time:this.items[0].time
                })
            },
            remove(item) {
                var i = this.items.indexOf(item)
                this.items.splice(i, 1)
            }
        }
    })
    </script>
</body>

</html>
      html5javascript
      阅读 4.7k
      1 个回答
      得票最新
      头像
      JohnYao
        140311

        你可以使用$emit与$on事件来进行兄弟组件之间的数据传输。

        先添加方法

        export default {
    methods: {
        send () {
            this.$emit("name", value);
        }
    }
}

        在组件里面用事件触发

        例：

        <my-component @click = "send"></my-component>

        在获取的组件获取数据

        export default {
    methods: {
        this.$on("name", function (value) {
            console.log(value);
        }.bind(this));
    }
}
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题