vuejs2.x中confirm弹窗如何控制提示语和点击确定与取消事件。。来上代码吧!

弹窗组件:

 <template>
  <div class="modal-mask">
    <div class="modal-confirm">
      <h4 class="confirm-header">操作提示</h4>
      <div class="confirm-content">
        {{ content }}
      </div>
      <div class="confirm-btns">
        <button class="btn" v-on:click="op('cancel')">取 消</button>
        <button class="btn btn-primary" v-on:click="op('ok')">确 定</button>
      </div>
    </div>
  </div>
</template>

调用组件的页面:

 <template>
    <div>
        <h1>Alert</h1>
        <button class="btn btn-primary" v-on:click="alert">alert</button>
        <confirm :parent-msg="parentMsg" v-show="confirmshow"></confirm>
    </div>
</template>

3个回答

这个是父组件

 <template>
  <div id="app">
    <confirm :m="msg"></confirm>
  </div>
</template>
<script>
  import confirm from "./components/confirm";
  export default {
    name: 'app',
    data(){
      return {
        msg:"父组件的message"
      }
    },
    components:{
      confirm
    }
  }
</script>

子组件

 <template>
    <p>{{m}}</p>
</template>
<script>
  export default {
    props:["m"]
  }
</script>

就这么点事,如果需要双向绑定还得改

I1326
I1326 回复qq_15007109:不点的时候是显示子组件自己的message么?如果是的话直接在你写的op事件里吧parent-msg赋值给子组件的data就好了啊
3 年多之前 回复
qq_15007109
bing_15007 ...这个我知道,我想知道如何在父组件中点击显示弹窗时候改变弹窗中的提示语和操作确定与取消按钮。
3 年多之前 回复

发提问之前可以预览看下先。。这些的是个啥..

qq_15007109
bing_15007 不好意思,刚才没搞好,现在更新了!
3 年多之前 回复

写麻烦了,非父子关系的这么搞,也能用,非要props传递的话我再去搞

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组建通信</title>
</head>
<style>
    .chlid{width: 400px;border:1px solid red;margin:0 auto;text-align: center;}
</style>
<body>
    <div id="box">
        <parent></parent>
    </div>
    <template id="chlid">
        <div class="chlid">
            <span>弹框</span>
            <p>{{a}}</p>
            <button @click="en">enter</button>  
            <button @click="ca">cancle</button>
        </div>
    </template>
    <template id="parent">
        <div>
            <p>父组件</p>
            <p>{{a}}</p>
            <button @click="toggle">呼叫弹窗</button>
            <chlid v-show="key"></chlid>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        window.onload=function(){
            var Event=new Vue();
            Vue.component('parent', {
                template: '#parent',
                data:function(){
                    return {
                        a:'父组件的msg',
                        key:false
                    }
                },
                methods:{
                    toggle:function(){
                        this.key=!this.key;
                        Event.$emit('parentMsg',this.a);
                    }
                },
                mounted(){
                    Event.$on("chlidMsg",function(a){
                        this.key=a;
                    }.bind(this));
                }
            });
            Vue.component("chlid",{
                template:"#chlid",
                data:function(){
                    return {
                        a:"子组件数据"
                    }
                },
                methods:{
                    en:function(){
                        alert("enter to do");
                        Event.$emit("chlidMsg",false);
                    },
                    ca:function(){
                        alert("cancle to do");
                        Event.$emit("chlidMsg",false);
                    }
                },
                mounted(){
                    Event.$on('parentMsg',function(a){
                        this.a=a;
                    }.bind(this));
                }
            })
            new Vue({
                el:'#box'
            });
        };
    </script>
</body>
</html>



qq_15007109
bing_15007 回复I1326: 可以照到上面帮我简单写一下嘛? 刚接触这个还不是很熟悉,搞了好久还没搞出来,麻烦麻烦
3 年多之前 回复
I1326
I1326 回复qq_15007109: 抱歉刚看到,其实就是自组建绑定数据<confirm :m="数据"></confirm>,然后子组建内部props:["m"]就齐了
3 年多之前 回复
qq_15007109
bing_15007 可以帮帮忙用props来做一个例子嘛 ? 有劳
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐