vue中父組件向子組件傳值(方法)

本文轉載自查看原文 2019-12-15 19:12 480 vue組件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父組件把方法傳遞給子組件</title>
    <script src="./vue2.6.9.js"></script>
</head>
<body>
<div id="app">
<!-- 父組件向子組件傳遞方法,使用的是事件綁定機制 v-on 當我們自定義了一個事件屬性之后,那么子組件就能夠通過某些方式來調用傳遞進去的這個方法了-->
    <com2 @func="show"></com2>
</div>

<template id="templ">
    <div>
        <h1>這是子組件</h1>
        <input  type="button" value="這是子組件中的按鈕,點擊它,觸發傳遞過來的func方法" @click="myclick"/>
    </div>
</template>
</body>
<script>
    //定義了一個字面量類型的組件模板對象
    var com2 = {
        template: '#templ',//通過指定一個Id,表示說要去加載這個指定id的template元素中的內容,當做組件的HTML結構
       data(){
            return {
                sonmsg:{
                    name:'張三',
                    age:18
                }
            }
       },
        methods: {
            myclick (){
                //emit '調用,觸發,發射'
                 this.$emit("func",this.sonmsg)

            }
        }
    }

    var vm = new Vue({
        el:'#app',
        data:{
           datamsgFromSon : null,
        },
        methods:{
            show(data){
                console.log("調用了父組件身上的show方法-----"+data)
                this.datamsgFromSon = data;
                console.log(data)
            }
        },
        components :{
            com2
        }
    })
</script>
</html>

效果圖

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue組件父組件使用子組件中的值（子組件給父組件傳值的方法） vue子組件向父組件傳值的方法 vue的子組件給父組件傳值的方法 VUe.js 父組件向子組件中傳值及方法 vue中父組件給子組件傳值的方法 vue中父組件向子組件傳值 vue中父組件向子組件傳值 vue父組件調用子組件方法、父組件向子組件傳值、子組件向父組件傳值 Vue父組件給子組件傳值 Vue父組件給子組件傳方法 Vue父組件把整個實例傳給子組件 Vue子組件和父組件、子組件調用父組件的方法、父組件調用子組件方法、子組件與父組件間的傳值