VUE 簡單父子元件，兄弟元件彈窗通訊練習

阿新 • • 發佈：2019-01-21

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>component</title>
        <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    </head>
    <body>
        <template id="child">
            <div class="childbox">
                <h2>我是子元件</h2>
                <div class="popup" v-if="show">
                    <h2>我是彈窗</h2> 
                    <input type="button"  value="隱藏" @click="change()" />
                </div>
            </div>
        </template>
        <div class="app">
            <h2>我是父元件</h2> 
            <input type="button" value="彈出"  @click="show =true"  :class="{active:show}" />
            <input type="button" value="隱藏"  @click="show =false" :class="{active:!show}" />
            <child :show ='show'  @parentevent="haha"></child>
            


        </div>
        <style type="text/css">
            .active{background-color: red;color:#fff;}
            .childbox{
                width: 500px;height: 500px;border:3px solid #ccc;
                margin:50px auto;
            }
            .childbox .popup{
                position: fixed;left: 50%;top: 50%;width: 200px;height: 200px;
                background-color: orange;
                transform: translate(-50%,-50%);
            }
    
        </style>
        <script type="text/javascript">
            var vm = new Vue({
                el:".app",
               
                data:{
                    show:false
                },
                methods:{
                    haha(boo){
                        this.show = boo
                    }
                },
                components:{
                    'child':{
                        template:'#child',
                        props:['show'],
                        data:function(){
                            return{
                                show1:false,   
                            }
                        },
                        methods:{
                            change(){
                                console.log(this.show1)
                                this.$emit('parentevent',this.show1);

                            }
                        }
                    }

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

------------------兄弟元件練習使用$emit,$on實現的！必須在同一例項上---------------------------

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>component</title>
        <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
    </head>
    <body>
        <!-- 元件1 -->
        <template id="child1"> 
            <div class="box1">
                <ul>
                    <li v-for="(item,idx) in dataset">
                        <h3>{{item.title}}</h3>
                        <p>{{item.cont}}</p>
                        <input type="button" value="彈出" @click="showPopup(idx)" />
                        <input type="button" value="隱藏" @click="hidePopup()"/>
                    </li>
                </ul>
            </div>
        </template>
        
        <!-- 元件2 -->
        <template id="child2">           
            <div class="popup" v-if="show">
                <h3>{{dataset.title}}</h3>
                <p>{{dataset.cont}}</p>
                <input type="button" value="隱藏" @click="hidePopup()" />
            </div>        
        </template>

        <div class="app">
            <div class="box2">
                
                <child1></child1>
                <child2></child2>
            
            </div>

        </div>
        <style type="text/css">
            .active{background-color: red;color:#fff;}
            .box1{
                width: 95%;
                border:2px solid red;margin-bottom: 10px;
            }
            .box2{
                width: 500px;height: 500px;border:3px solid #ccc;
                margin:50px auto;
            }
            .box2 .popup{
                position: fixed;left: 50%;top: 50%;width: 200px;height: 200px;
                background-color: orange;
                
            }    
        </style>
        <script type="text/javascript">
            let bus =new Vue(); 

            let child1 = {
                            template:'#child1',
                            data:function(){
                                return{
                                    dataset:[
                                        {
                                            title:'我是資料1',
                                            cont:'大資料小資料熱武器熱舞 飛灑范德薩熱舞熱舞諷德誦功反對范德薩費迪國防大廈股份的供熱熱1'
                                        },
                                        {
                                            title:'我是資料2',
                                            cont:'資料2資料2回覆的說法都是范德薩范德薩范德薩股份'
                                        }
                                    ] 
                                }
                            },
                            methods:{
                               showPopup(idx){
                                  bus.$emit('show2',this.dataset[idx])
                               },
                               hidePopup(idx){
                                  bus.$emit('changeShow')
                               },
                            }
            }
            let child2 = {
                            template:'#child2',
                            mounted(){
                                bus.$on('show2',(key)=>{
                                    this.dataset = key;
                                    this.show = true;
                                });
                                bus.$on('changeShow',()=>{
                                    this.show = false;
                                })
                            },
                            data(){
                                return {
                                    dataset:{},
                                    show:false
                                }
                            },
                            methods:{
                                hidePopup(){
                                    this.show =false;
                                }
                            }
            }

            let vm = new Vue({
                el:".app",
                components:{
                    'child1':child1,
                    'child2':child2

                }
            });

        </script>
    </body>
</html>

VUE 簡單父子元件，兄弟元件彈窗通訊練習

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>component</titl

vue實現父子元件、兄弟元件間通訊

父傳子父元件（app.vue） <template> <div id="app"> <hello-world :person="user"><

Vue.js（10）- 兄弟元件共享資料

index.html: <div id="app"> <p>這是index.html</p> <my-gg></my-gg> <hr> <my-dd></my-dd>

vue元件，父元件與子元件之間通訊

vue元件，元件是一個可複用的功能模組，即將具有相同功能的模組抽取成一個元件，在需要的地方引用即可，這體現了程式碼封裝的思想，下面看一下元件是如何實現： // 定義一個名為 button-counter 的新元件 Vue.component('button-counter',

餓了麼專案---12、父子元件、兄弟元件之間資料通訊與事件派發（關於購物車新增按鈕的動畫）

html程式碼生成一個動畫小球的div,並且生成五個小球,五個是為了生成一定數量的小球來作為操作使用,按照小球動畫的速度,一般來說五個也可以保證有足夠的小球數量來執行動畫動畫的內容分別是外層和內

vue中父元件傳值給子元件，父元件值改變，子元件不能重新渲染

1在子元件中用watch()監聽值的改變，不同的型別的要用不同的監聽方法props: { echartStyle: { type: Object, default() { return {} }}, titleText: {

基於 Vue 2.0 實現的移動端彈窗 (Alert, Confirm, Toast)元件.

wc-messagebox基於 vue 2.0 開發的外掛包含 Alert, Confirm, Toast, Prompt仿照 iOS 原生UI(樣式來源: MUI)一些想法剛開始的時候想要用現成的彈窗元件來著, 但是查詢一圈沒有發現比較合適專案的, 所以才自己開發了一個,

vue導航守衛beforeRouteLeave瀏覽器返回時，自定義彈窗提醒使用者儲存資訊

H5頁面中經常會遇到的情況，當前頁面點選返回，想要提示彈窗"是否確認離開當前頁面"之類的需求。自己試著看了一下網上的方法，大多是alert出系統彈窗。其實要實現自定義彈窗提示，也是很容易的。從另一個頁面點選跳轉到當前頁（如下），點選瀏覽器返回按鈕，則會彈窗下面的彈窗，點選彈窗確定按鈕，頁面

父元件中呼叫子元件，父元件資料更新傳到子元件後，子元件頁面未更新的問題

問題描述：父元件呼叫了一個子元件，傳遞了一個id的屬性到子元件，但是在子元件中將這個id的props屬性賦值給了data裡面定義的另外一個屬性myId，並且寫了watch監聽這個id的props。結果：第一次的時候子元件並沒有更新介面（即data裡面的myId屬性沒有更新）；第二次及以後就

元件高階知識（受控元件，無狀態元件，高階元件，純元件）

元件高階知識受控元件（controlled components）在原生的表單中，input的值是這麼設定的。 <input value="mapbar_front" /> 並且在這種情況下，我們能夠給input中輸入任何的值。但是在reac

rest_framwork之認證元件，許可權元件，頻率元件

1 認證元件2 許可權元件3 頻率元件1 認證元件 (1) 定義一個認證類 class UserAuth(): def authenticate_header(self,reuqest): &

使用antd的Select元件，Cascader元件，DatePicker等下拉選項必須要新增的getPopupContainer

getPopupContainer 選單渲染父節點。預設渲染到 body 上，如果你遇到選單滾動定位問題，試試修改為滾動的區域，並相對其定位。這個屬性,看似不重要的屬性，卻起著重大的作用。效果圖：當資料比較多的，可以滾動的時候。點選選擇框，滑動滾輪沒有新增這個

UIScrollView新增控制元件，控制元件距離頂部始終有間距的問題

今天，特別鬱悶，自定義了一個UIScrollView,然後在它裡面新增控制元件，如UIButton *button = [[UIButton alloc] initWithFrame:CGRectMa

框架，庫，外掛，元件，控制元件之簡介

1.框架。FrameWork。無法對框架進行修改 2.庫。Library。以框架為基礎開發而成，可對庫的內容進行修改。 3.外掛。Plugin。一段寫好的程式碼，方便開發者使用。比如前段的輪播圖外掛，比較花哨的選單外掛，以及甘特圖外掛，Highcharts 圖表外掛，Ex

在React中寫一個Animation元件，為元件進入和離開加上動畫/過度

問題在單頁面應用中，我們經常需要給路由的切換或者元素的掛載和解除安裝加上過渡效果，為這麼一個小功能引入第三方框架，實在有點小糾結。不如自己封裝。思路原理以進入時opacity: 0 --> opacity: 1 ，退出時opacity: 0 --> opacity: 1為例元素掛載時

JavaScript的案例（數據校驗，js輪播圖，頁面定時彈窗）

頁面 span one align 數據校驗 lse 格式用戶輸入 ade 1.數據校驗步驟 1.確定事件（onsubmit）並綁定一個函數 2.書寫這個函數，獲取數據，並綁定id

jquery — parent.document，父視窗彈窗寫法

$('.attachment', parent.document).click(function(e){ _layer.open({ type: 1,

vue中封裝一個全局的彈窗js

fix fun true flexbox -a -s string posit parent /** * Created by yx on 2017/12/21. */ export default { /** * 帶按鈕的彈框 * <!--自定義提示標題,內容,單

vue 小知識總結 ------ 自定義公共彈窗

1 新建彈窗元件檔案 selfToast.vue 主體內容：  <template> <transition name="main-bg-fade"> <div class=

OC 簡單封裝UIAlertController實現單按鈕彈窗和雙按鈕彈窗

1.程式碼如下： @interface AlertView : UIView + (AlertView *)shareAlertView; /**帶有單按鈕的彈出檢視顏色可以不填*/ - (void)alertWithTitle:(NSString *)tit

VUE 簡單父子元件，兄弟元件彈窗通訊練習

相關推薦