1911A:VUE元件
阿新 • • 發佈:2020-11-01
1.元件定義
- 定義元件並引用
- 父元件向子元件傳值
- 子元件向父元件傳值
- 元件間傳值:vuex (https://www.cnblogs.com/xiaonq/p/9697921.html)
1.1 什麼是元件
- Html中有元件,是一段可以被複用的結構程式碼
- Css中有元件,是一段可以被複用的樣式
- Js中有元件,是一段可以被複用的功能
- Vue中也有元件,指的就是一個模組,是一個獨立的,完整的(包含html,css,js等),可以直接 拿來用的
1.2 元件特性
- 元件的例項化物件,跟vue例項化物件一樣,因此,我們也可以將vue例項化物件看成元件
- 元件間是獨立的,因此資料要獨立儲存,方法要獨立定義,彼此間不能共享。
2.父元件向子元件傳值
2.1components/Child.vue定義子元件
<template> <div style="color: red"> <h1>子元件內容</h1> <p>{{data}}</p> </div> </template> <script> export default { // 子元件要使用父元件的資料,只需要一步,在 props中接收父元件的屬性 props: ['data'], // 接收父元件給子元件定義的屬性 } </script>
2.2 components/Father.vue定義父元件
<template> <div> <h1>父元件內容</h1> 父元件顯示:{{msg}} <!--3.第三步:把父元件的某一個屬性傳遞給子元件--> <Child :data='msg' ></Child> </div> </template> <script> // @指定的是src路徑 import Child from '@/components/Child' // 1.第一步:在父元件中匯入子元件 export default { // 2.第二步:父元件中註冊子元件 components: { Child }, data() { return { msg: '父元件的資訊' } }, methods: { } } </script>
2.3router/index.js中註冊路由
router/index.js2.4 測試
子元件中可以通過 定義props屬性來接收父元件的資料
3.子元件向父元件傳值
3.1components/Child.vue子元件通過觸發方法, 向父元件傳值
components/Child.vue3.2components/Father.vue給子元件新增事件及事件處理方法
components/Father.vue3.3 測試
·點選 "呼叫父元件方法" 就會呼叫
http://127.0.0.1:8080/father