vue元件間的父子傳參問題，
阿新 • • 發佈：2021-03-23
父子元件傳參，主要利用了props
如果剛接觸vue還沒有用過vue的腳手架，我們怎樣練習vue呢，我們可以去vue官網下載vue.js並引進專案中，vue中的程式碼與html有點不同，
下面就是引進vue.js的模板程式碼。
// A code block <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"></div> <script> new Vue({ el: "#app", data: {}, methods: {}, }); </script> </body> </html>
下面具體說一下vue間的父子傳參問題？
先建立一個主頁面，先引進vue.js,子元件，父元件，順序不能亂，例如
// A code block <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="../js/vue.js"></script> <script src="child.js"></script> <script src="father.js"></script> </head> <body> <div id="app"> <todo></todo> </div> <script> new Vue({ el: "#app", data: {}, methods: {}, }); </script> </body> </html>
在建立父元件father.js
// A code block Vue.component("todo", { template: `<div> <h1>我是父元件</h1> <first-child v-for="(task,i) of tasks" :key="i" :tasks="tasks" :task="task" :i="i"> <template slot="task">{{task}}</template> </first-child> </div>`, data() { return { tasks: ["luse", "ruse", "tom"], }; }, components: { firstChild, }, });
建立子元件child.js
// A code block
var firstChild = {
template: `<div>
<h2>我是子元件</h2>
<ul>
<li>{{i+1}}--<slot name="task"></slot></li>
</ul>
</div>`,
props: ["tasks", "i", "task"],
components: {},
};
效果圖
在這裡插入圖片描述
現在談談父子傳參：
父元件：需要用繫結語法將自己的變數繫結給子元件定義的公開屬性
子元件:定義公開屬性用propsa父給的變數值