vue元件（component）傳值問題

bling flower發表於2020-09-28
Vue元件

父傳子：(即在子元件中訪問父元件中的資料)

1.在父元件中使用子元件時，新增自定義屬性，屬性值為傳輸的內容
    <myfooter msg='hello父元件給子元件的內容'></myfooter>
2.在子元件中，使用props:['msg']接收父元件中傳遞的屬性
     props:['msg'],//當前子元件希望從父元件中接收的屬性
      						 多個屬性使用逗號分隔

注： props宣告在和data,methods同級位置
程式碼案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script>
        window.onload=function(){
            //子元件
            Vue.component('myfooter',{
                data(){
                    return {
                        substr:'myfooter'
                    }
                },
                props:['msg','str','num'],//子元件想要從父元件中接收的屬性
                template:`
                    <div>
                        <p>hello--- {{msg}}---</p>
                        <p>{{str}}</p>
                        <p>{{num}}</p>
                    </div>
                `
            })
            //例項物件
            var myheader={//父元件
                data(){
                    return {
                        num:0
                    }
                },
                methods:{
                    handler(){
                        this.num++
                    }
                },
                template:`
                    <div>
                        <p>哇哈哈哈--- {{num}}</p>
                        <p>第二個哇哈哈哈---</p>
                        <myfooter msg='hello這是父給子的內容' str='my' :num='num'></myfooter>
                        <button v-on:click='handler'>點選這裡</button>
                    </div>
                `
            }
            var app=new Vue({
                el:'#app',
                data:{},
                methods:{},
                components:{
                    'myheader':myheader,
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <myheader></myheader>
    </div>
</body>
</html>

子傳父:(即在父元件中訪問子元件中的資料)

1.在子元件中使用事件繫結觸發父級的自定義事件
  $emit('name',data,data1);   //name為觸發的自定義函式名稱，data,data1為傳送的資料
2.在父元件中繫結自定義事件
    在自定義事件的事件處理程式中，引數為傳遞的值

程式碼案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script>
        window.onload=function(){
            Vue.component('myfooter',{//子元件
                data(){
                    return {
                        substr:'myfooter'
                    }
                },
                methods:{
                    send(){
                        this.$emit('accept','send','send1',this.substr)
                    }
                },
                template:`
                    <div>
                        <p v-on:click='send'>click--send</p>
                    </div>
                `
            })

            var myheader={//父元件
                data(){
                    return {
                        num:0,
                        substr:''
                    }
                },
                methods:{
                    handler(){
                        this.num++
                    },
                    accept(data,data1,data2){
                        this.substr=data
                        console.log(data,data1,data2);//send

                    }
                },
                template:`
                    <div>
                        {{substr}}   //send
                        <myfooter v-on:accept='accept'></myfooter>
                    </div>
                `
            }
            var app=new Vue({
                el:'#app',
                data:{},
                methods:{},
                components:{
                    'myheader':myheader,
                }
            })
        }
    </script>
</head>
<body>
    <div id="app">
        <myheader></myheader>
    </div>
</body>
</html>

相關文章