Vue 組件子傳父理解篇

時間 2019-11-10

標籤 vue 組件理解简体版

原文原文鏈接

vue 子傳父

1.想要子傳父，經過子組件控制父組件方法，進而讓父組件的方法本身改變本身的data
2.明確父組件綁定的dom上內容做用域都屬於父組件的，所以傳值的都是父組件的data或者methods例如
下面的案例，首先v-bind:title = 'title'和@click='parentClick' 中左面都是子組件的接受的變量
值，右面都有多是父組件data或者methods傳值:
    <div id='app'>
        <my-com v-bind:title = 'title' @func='parentClick'></my-com>
    <div>
3.簡單總結:等號左面的屬於子組件的右面屬於父組件

子傳父我的理解

1.子傳父就是子組件控制父組件方法，讓父組件變相改變本身data
2.須要在子組件methods，某個方法中使用$emit('func','傳遞的參數') 來控制
3.這種控制是變相的，所以會在子組件中單獨有一個事件在內部專門觸發，$emit
方法。

使用$emit -- 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{count}}
    <!--子組件用來傳遞父組件的方法-->
    <my-Com2 @fun="myChange"></my-Com2>
</div>

<template id="com">
    <!--在組件內部特地定義了一個觸發父組件方法的點擊事件-->
    <button @click="changeParent">操做父組件的子組件方法</button>
</template>

<script>
    let myCom2 = {
        template:'#com',
        data(){
            return {
                title:'子組件',
            }
        },
        methods:{
          // 用來專門觸發父組件方法子組件，用來觸發$emit
            changeParent(){
                // 根據上面的介紹原則等號左面的屬於子組件的右面屬於父組件
                // 所以fun是子組件的,告訴本身的組件的點擊事件，點擊後觸發
                // $emit,讓他去找參數中和func綁定的父組件的方法
                // 第二個參數能夠往父組件傳值
                this.$emit('fun','我是傳值')
            }
        },
    };

    var vm = new Vue({
        el: '#app',
        data:{
          count:0,
        },
        methods:{
            // 子組件操控父組件改變本身data的方法
            myChange(args){
              console.log(args)
              this.count++;
          }
        },
        components:{
            // 在外部聲明變量，使用代碼簡潔
            myCom2,
        }
    });
</script>
</body>
</html>

使用 -- sync語法糖案例

1.2.3.0新增的語法糖
2.這種就不涉及到經過方法去操控父組件中的data改變，而是利用子傳父的思
想，把props中的屬性值和父組件中的data造成捆綁，利用$emit改變子組件的
data，變相改變了父組件中的data

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{count}}
    <!--子組件用來傳遞父組件的方法-->
    <my-Com2 v-bind:parent-Count.sync = 'count'></my-Com2>
</div>

<template id="com">
    <!--在組件內部特地定義了一個觸發父組件方法的點擊事件-->
    <button @click="changeParent">操做父組件的子組件方法</button>
</template>

<script>
    let myCom2 = {
        template:'#com',
        data(){
            return {
                title:'子組件',
            }
        },
        // 父傳子
        props:['parentCount'],
        methods:{
          // 用來專門觸發父組件方法子組件，用來觸發$emit
            changeParent(){
                // 根據上面的介紹原則等號左面的屬於子組件的右面屬於父組件
                // 將父子組件data 都綁定在一塊兒，改變子組件就是改變了父組件
                this.$emit('update:parentCount',1000)
            }
        },
    };
    var vm = new Vue({
        el: '#app',
        data:{
          count:0,
        },
        components:{
            // 在外部聲明變量，使用代碼簡潔
            myCom2,
        }
    });
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。