Vue元件
**# 1.元件定義
1.定義元件並引用
2.父元件向子元件傳值
3.子元件向父元件傳值
# 元件間傳值:vuex (https://www.cnblogs.com/xiaonq/p/9697921.html)
1.1 什麼是元件
- Html中有元件,是一段可以被複用的結構程式碼
- Css中有元件,是一段可以被複用的樣式
- Js中有元件,是一段可以被複用的功能
- Vue中也有元件,指的就是一個模組,是一個獨立的,完整的(包含html,css,js等),可以直接拿來用的
1.2 元件特性
- 元件的例項化物件,跟vue例項化物件一樣,因此,我們也可以將vue例項化物件看成元件
- 元件間是獨立的,因此資料要獨立儲存,方法要獨立定義,
彼此間不能共享
。
2.父元件向子元件傳值
2.1 components/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 '@/views/demo/Child' // 1.第一步:在父元件中匯入子元件
export default {
// 2.第二步:父元件中註冊子元件
components: {
Child
},
data() {
return {
msg: '父元件的資訊'
}
},
methods: {
}
}
</script>
2.3 router/index.js
中註冊路由
import Father from '@/views/demo/Father'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/component', name: 'Father', component: Father },
]
})
2.4 測試
- 子元件中可以通過 定義
props
屬性來接收父元件的資料
3.子元件向父元件傳值
3.1 components/Child.vue
子元件通過觸發方法, 向父元件傳值
<template>
<div>{{data}}
<button @click="emitfather">呼叫父元件方法</button>
</div>
</template>
<script>
export default {
props: ['data'], // 接收父元件給子元件定義的屬性
methods: {
emitfather() {
console.log('呼叫emitfather方法')
//1.子元件呼叫父元件方法,並傳值
// $emit 觸發當前例項上的事件,也可以簡單的理解為觸發父元件上的事件(向上冒泡)
this.$emit('changeMsg', '子元件資訊修改後的data資訊,傳遞給父元件')
}
}
}
</script>
3.2 components/Father.vue
給子元件新增事件及事件處理方法
<template>
<div>
父元件顯示:{{msg}}
<!--4.把父元件的一個方法傳遞給子元件-->
<Child
:data='msg'
@changeMsg='change'
></Child>
</div>
</template>
<script>
//1.匯入
import Child from '@/views/demo/Child'
export default {
//2.註冊
components: {
Child,
},
data() {
return {
msg: '父元件的資訊'
}
},
methods: {
//3.在父元件中定義一個change方法,可以在子元件中觸發並傳值給父元件
change(data) {
// data接收是子元件中傳遞的資料
// debugger
alert('呼叫了父元件的方法, 接收到資訊:'+data)
this.msg = data // 更新父元件的內容
}
}
}
</script>
3.3 測試
- 點選 “呼叫父元件方法” 就會呼叫
http://localhost:8081/#/component
相關文章
- 繼續研究vue元件vue-menu元件Vue元件
- Vue 元件用法Vue元件
- Vue的元件Vue元件
- Vue @user 元件Vue元件
- vue元件化Vue元件化
- Vue 元件支援Vue元件
- vue元件使用Vue元件
- Vue-元件Vue元件
- Vue元件、元件傳值和元件插槽Vue元件
- Vue 表格元件 GridManager VueVue元件
- vue - Vue元件化程式設計Vue元件化程式設計
- Vue元件試用Vue元件
- vue元件筆記Vue元件筆記
- Vue 元件基礎Vue元件
- Vue 元件傳值Vue元件
- Vue元件開發Vue元件
- vue元件通訊Vue元件
- Vue 元件實戰Vue元件
- Vue-元件化Vue元件化
- 【Vue】元件使用之isVue元件
- Vue元件遞迴Vue元件遞迴
- Vue-元件(2)Vue元件
- Vue--元件(1)Vue元件
- 三. Vue元件化Vue元件化
- vue 元件通訊Vue元件
- Vue元件之TooltipVue元件
- VUE元件彙總Vue元件
- Vue元件實戰Vue元件
- 認識Vue元件Vue元件
- vue 動態元件Vue元件
- Vue — 元件通訊Vue元件
- 【Vue】 簽名元件Vue元件
- vue中子元件傳遞父元件$emitVue元件MIT
- Vue 動態元件 & 非同步元件原理Vue元件非同步
- 讓Vue元件變成Powerful的元件Vue元件
- vue實戰-元件編寫-todolist元件Vue元件
- Vue中父子元件通訊——元件todolistVue元件
- vue父元件和子元件傳值Vue元件