Vue_(組件通信)父子組件簡單關係

時間 2020-05-05

標籤 vue 組件通信父子簡單關係简体版

原文原文鏈接

　　Vue組件　　傳送門javascript

在Vue的組件內也能夠定義組件，這種關係成爲父子組件的關係html

　　若是在一個Vue實例中定義了component-a，而後在component-a中定義了component-b，那他們的關係就是vue

　　　　Vue實例 -- 根組件 root java

　　　　　　component-a – 相對於root 這是子組件，相對於component-b這是父組件ide

　　　　　　　　 component-b -- 子組件ui

　　目錄結構spa

　　簡單的經過在父組件調用子組件，但父組件的值是沒法直接傳遞給子組件code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Gary</title>
    </head>
    <body>
        <div id="GaryId">
            <father-component></father-component>
            
        </div>
    </body>

<template id="father-template">
        <div>
            <h1>father component</h1> myData : <span>{{name}}</span>
            
            <hr />
            
            <child-component></child-component>
        </div>
    </template>
    
    <template id="child-template">
        <div>
            <h2>child component</h2> fatherData : <span>{{name}}</span>
        </div>
    </template>

    <script type="text/javascript" src="../js/vue.js" ></script>
    <script type="text/javascript">
    
        new Vue({ data : { }, components : { "father-component" : { data(){ return { name : 'Gary' } }, template : "#father-template", components : { "child-component" : { template : "#child-template" } } } } }).$mount("#GaryId"); </script>
</html>

Gary_fatherAndChild.html

實現過程component

　　在<body>中經過<div>調用父組件<father-component>去調用子組件<child-component>htm

<body>
        <div id="GaryId">
            <father-component></father-component>
        </div>
    </body>

　　父子組建，在父組件與子組件中分別調用父組件data()域中的值

<template id="father-template">
        <div>
            <h1>father component</h1> myData : <span>{{name}}</span>
            
            <hr />
            
            <child-component></child-component>
        </div>
    </template>
    
    <template id="child-template">
        <div>
            <h2>child component</h2> fatherData : <span>{{name}}</span>
        </div>
    </template>

　　在Vue中子組件嵌套在父組件當中，其中給父組件name屬性賦值"Gary"

 components : { "father-component" : { data(){ return { name : 'Gary' } }, template : "#father-template", components : { "child-component" : { template : "#child-template" } } } }

相關標籤/搜索

每日一句

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