Vue元件的巢狀和通訊

阿新 • • 發佈：2021-02-01

技術標籤：vue vue

文章目錄

01.元件巢狀

<body>
    <div id="app">
        <login></login>
    </div>

    <template id="login">
        <div>
            <ul>
                <li @click="aaa='account' 
">360帳號登陸</li>
                <li @click="aaa='phone'">手機號登陸</li>
            </ul>
            <!-- 元件裡再巢狀元件 -->
            <component :is='aaa'></component>
        </div>
    </template>

    <template id="account"> 

        <div>
            <h1>360帳號登陸</h1>
        <input type="text" placeholder="360帳號登陸">
        </div>
    </template>
    <template id="phone">
        <div>
            <h1>手機號登陸</h1>
            <input type 
="text" placeholder="手機號登陸">
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>
        let account={template:'#account'};
        let phone={template:'#phone'};
        let login={
            template:'#login',
            data(){
                return {
                    aaa:'account'
                }
            },
            //將account和phone掛載到login上
            components:{
                'account':account,
                'phone':phone
            }
        }
        new Vue({
            el:"#app",
            components:{
                'login':login
            }
        })
    </script>
</body>

在這裡插入圖片描述

02.元件通訊

父元件：內部嵌套了元件的元件
子元件：巢狀在元件內部的元件
一般情況下父子元件是不能直接通訊的，父/子元件不能使用子/父元件的值
如果父/子元件直接使用子/父元件的變數，會報錯 變數 is not defind

03.父元件傳參給子元件

父元件的值傳遞給子元件

在佔位符中 :a="fmsg" a子元件中需要接收的資料(自定義) fmsg父元件資料
在子元件中定義屬性 props 接收a props:['a']
在子元件中可以直接使用a
父元件的值變化，子元件的值會跟著變化

<body>
    <div id="app">
        {{fmsg}}<br>
        <button @click='change()'>點選修改父元件的資料</button>
        <v-header :a='fmsg'></v-header>
    </div>
    <template id="header">
        <div>
            <h1>這是頭部{{a}}</h1>
            <button @click='change()'>點選修改從父元件接收的資料</button>
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>
        let header={
            template:'#header',
            data(){
                return {
                    smsg:'這是子元件的資料'
                }
            },
            props:['a'],
            methods:{
                change(){
                    this.a+=2;
                }
            }
        }
        new Vue({
            el:'#app',
            data:{
                fmsg:'這是父元件的資料'
            },
            methods:{
                change(){
                    this.fmsg+=1;
                }
            },
            components:{
                'v-header':header
            }
        })
    </script>
</body>

在這裡插入圖片描述
修改父元件的資料

修改子元件的資料

2個問題：

傳參後，修改子元件的資料時會報錯(可以忽略)
傳參後，修改子元件值的時候讓父元件的值也改變(購物車加減)

修改子元件的資料時會報錯：
在這裡插入圖片描述

//在子元件裡直接使用m
<h1>這是頭部{{m}}</h1>

var header={
	template:'#header',
	data(){
		return {
			msg:'這是子元件資料',
			m:this.a,
		}
	},
	// 監聽變數a的變化，如果a有變化的時候，直接賦值給m。相當於找了個m來接收資料
	watch:{
		a(){
			this.m=this.a;
		}
	},
	props:['a'],
	methods:{
		change(){
			this.m+=2;
		}
	}
}

讓兩個值一起改變：連結

05.子元件傳參給父元件

子元件傳參給父元件

在子元件中定義一個方法(該方法用來定義事件)。方法內部定義事件 this.$emit('事件名',所需要傳送的資料(傳送給父元件的資料))
在佔位符中 @事件名(在子元件中定義的事件)="方法名(不加括號，需要在父元件中定義)"
在父元件中，定義接收資料的方法
在子元件中，執行剛剛定義的事件方法。

<body>
    <div id="app">
        {{msg}}<br>
        <button @click='change()'>點選修改父元件的資料</button>
        <!-- 佔位符中傳送資料 -->
        <v-header @send="get"></v-header>
    </div>
    <template id="header">
        <div>
            <h1>這是頭部{{num}}</h1>
            <button @click='change()'>點選修改從父元件接收的資料</button>
            <!-- 子元件中執行fn方法 -->
            {{fn()}}
        </div>

    </template>


    <script src="js/vue.js"></script>
    <script>
        let header={
            template:'#header',
            data(){
                return {
                    num:'這是子元件的資料'
                }
            },
            methods:{
            //子元件中定義方法
                fn(){
                    this.$emit('send',this.num)
                },
                change(){
                    this.num+=1;
                }
            }
        }
        new Vue({
            el:"#app",
            data:{
                msg:'這是父元件的資料'
            },
            methods:{
            	//父元件中接受資料
                get(a){
                    this.msg=a;
                }
            },
            components:{
                'v-header':header
            }
        })
    </script>
</body>