一.父元件向子元件傳值

1.建立子元件，在src/components/資料夾下新建一個Child.vue
2.Child.vue的中建立props，然後建立一個名為message的屬性

父元件

<template>
    <div>
        <h1>我是父元件！</h1>
        <child v-bind:message="msg"></child>
    </div>
</template>
<script>
    import Child from './components/Child.vue
 
'
    export default {
//子元件引用
        components: {
            Child
        },
        data() {
            return {
                msg: '我是子元件！'
            }
        }
    }
</script>

子元件
<template>
    <h3>{{message}}</h3>
</template>
<script>
    export default {
        props: ['message']
    }
</script>
 

子傳父

父元件通過繫結自定義事件，接受子元件傳遞過來的引數
子元件通過$emit觸發父元件上的自定義事件，傳送引數

父元件通過$on監聽事件，事件處理函式的引數則為接收的資料

子元件通過$emit可以觸發事件，

第一個引數為要觸發的事件，第二個事件為要傳遞的資料

sync修飾符：對一個 props 進行雙向繫結

<template>
    <div class="parent">
        <h2>{{ msg }}</h2>
        <p>父元件接手到的內容：{{ username }}</p>
 

        <child psMsg="我是你爸爸" @transfer="getUser"></child>
        <!-- 監聽子元件觸發的transfer事件,然後呼叫getUser方法 -->
    </div>
</template>
<script>
    import Child from './components/Child'
    export default {
        name: 'App',
        data () {
            return {
                msg: '父元件',
                username:'',
            }
        },
        components:{Child},
        methods:{
            getUser(msg){
                this.username= msg
            }
        }
    }
</script>

<template>
    <div class="Child">
        <p>{{ sonMsg }}</p>
        <p>子元件接收到內容：{{ psMsg }}</p>
        <!--<input type="text" v-model="user" @change="setUser">-->
        <button @click="setUser">傳值</button>
    </div>
</template>
<script>
    export default {
        name: "Child",
        data(){
            return {
                sonMsg:'子元件',
                user:'子傳父的內容'
            }
        },
        props:['psMsg'],
        methods:{
            setUser:function(){
                this.$emit('transfer',this.user)//觸發transfer方法，this.user 為向父元件傳遞的資料
            }
        }
    }
</script>