父組件往子組件傳值(經常使用)

時間 2020-06-19

標籤組件經常使用简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <App></App>
</div>
<script src="vue.js"></script>
<script>

    //子組件2
    //第一步:生子2 掛子往App裏掛, 不須要掛Vue裏
 let Vheader = {//對象
 data(){ return {} }, //第一步(傳值的 ): 子組件掛載父組件的屬性props 掛載以後就能夠在子組件內部使用父組件傳過來的數據了*****
 props:["msg","post"], //template 是一個組件模板,必定要用一個根(父)元素包裹起來,因此必定要有一個div閉合****
        //第三步(傳值):展現父組件傳來的值
 template:` <div>
            <h2>生子是在子組件中</h2>
            <h2 style="color:red">掛子和用子是在父組件中</h2>
            <h3>{{msg}}</h3>
            <h3>{{post.title}}</h3>

        </div>
 `, }; //第一步: 聲子 Vue中組件的首字母要大寫, 跟標籤區分
    //組件中的data必須是個函數,必定要有返回值
 let App = { //跟的是一個對象 這個對象裏 就是除了下面的Vue中,el之外的全部屬性
 data() { // 父-->子傳值 經過props 屬性
            // post傳入一個對象的多個屬性
            return { text: "我是Vheader的父組件,想把數據傳過去", post:{ id:1, title:"My journey with Vue" } } }, //第四步: 給子組件裏寫內容. 當前模板裏的標籤,只用當前數據屬性跟下面的根組件Vue沒有關係
        //在<h2>{{text}}</h2>中的{{text}}部分能夠放頭部組件,內容組件和側邊欄組件 ************
        // 第三步:用子2 <Vheader></Vheader>, 下一步去對應模板Vheader的template裏寫內容

        //第二步(傳值的): 父組件中經過v-bind綁定自定義屬性, 在Vheader定義自定義的屬性 :msg 這個msg必定是跟子組件裏的props:["msg"]同樣***
        // 傳入一個對象的多個屬性用post
 template: ` <div id="a">

            <Vheader v-bind:msg="text" v-bind:post="post"></Vheader>

        </div>
 `, //給子組件定義方法 好比說a標籤的超連接
 methods:{ }, components:{ // 第二步:掛子2
 Vheader }, } new Vue({ el: "#app", //綁定根元素 是上面的id="app"
 data() { return {msg: "alex"} }, components: { // 第二步: 掛子 父組件Vue裏不只是能夠掛載一個App,還能夠掛載其餘組件
 App //若是key和value同樣,能夠只寫App 替代App:App
 } }) </script>
</body>
</html>

相關標籤/搜索

每日一句

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