8. 組件的使用以及父子組件的傳值問題

1、組件的使用


 <div id="app">
        <!-- 3.使用組件 -->
        <item></item>
    </div>
    <script>
        /* 1.定義組件 */
        var item = {
            data() {
                return {
                    msg: "hello world"
                }
            },
            template: "<div>{{msg}}</div>"
        }
        var vm = new Vue({
            el: "#app",
            /* 2.注冊組件 */
            components: {
                item
            }
        })
    </script>

2、父組件通過子組件的屬性向子組件傳遞參數


    <div id="app">
        <!-- 引入子組件標簽 :相當于v-bind:-->
        <item v-bind:message="word"></item>
        <!-- 創建item標簽,用v-bind對message的值進行動態綁定,word用于父組件,父組件對它賦值 -->
    </div>

    <script>
        /* 子組件 */
        var item = {
            /* 在子組件中用props來接收父組件傳來的數據,之后展示在子組件中 */
            /* 不聲明傳值的類型 
            props: ['message'],*/
            /* 聲明傳值的類型 */
            props: {
                message: {
                    type: String
                }
            },
            data() {
                return {
                    msg: "hello world"
                }
            },
            /* 模板就是頁面要顯示的數據 */
            template: "<div>{{msg}}{{message}}</div>"
        }
        new Vue({
            el: "#app",
            data: {
                word: "NB"
            },
            /* 注冊子組件 */
            components: {
                item
            }
        })
    </script>
  • 2-1不聲明傳值的類型
 <script>
        var item ={
            props: ['message'],
            template:"<div>{{count}}</div>"
        }
    </script>
  • 2-2聲明傳值的類型
 <script>
        var item ={
              props: {
                message: {
                    type: String
                }
            }
            template:"<div>{{count}}</div>"
        }
    </script>

總結:父組件向子組件傳值成功

  • 子組件在props中創建一個屬性,用以接收父組件傳過來的值
  • 父組件中注冊子組件
  • 在子組件標簽中添加子組件props中創建的屬性
  • 把需要傳給子組件的值賦給該屬性

3、子組件向父組件傳參


<div id="app">
        <item @handle="handleClick"></item>
    </div>
    <script>
        var item = {
            data() {
                return {
                    msg: "child"
                }
            },
            template: "<div @click='handleClick'>{{msg}}</div>",
            methods: {
                handleClick() {
                    /* 給父組件自定義一個事件,向父組件傳參 */
                    this.$emit("handle", "hahahhaha");
                }
            }
        }

        new Vue({
            el: "#app",
            components: {
                item
            },
            methods: {
                handleClick(options) {
                    alert(options)
                }
            }
        })
    </script>

總結:子組件向父組件傳值成功

  • 子組件中需要以某種方式例如點擊事件的方法來觸發一個自定義事件
  • 將需要傳的值作為$emit的第二個參數,該值將作為實參傳給響應自定義事件的方法
  • 在父組件中注冊子組件并在子組件標簽上綁定對自定義事件的監聽

在通信中,無論是子組件向父組件傳值還是父組件向子組件傳值,他們都有一個共同點就是有中間介質,子向父的介質是自定義事件,父向子的介質是props中的屬性

推薦博客

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容