生活随笔
收集整理的這篇文章主要介紹了
vue组件通讯
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
vue組件通訊
一、父 -> 組件之間的通訊：
-
方式：通過props屬性來傳遞數(shù)據(jù)
-
注意：屬性的值必須在組件中通過props屬性顯示指定，否則，不會(huì)生效
-
說明：傳遞過來的props屬性的用法與data屬性的用法相同
// demo1:傳遞普通字符串
// 父組件定義傳遞參數(shù)
<hello msg="120"></hello>
<hello my-msg="'abc'"></hello>// 子組件中相應(yīng)接收
<script>components: {hello: {// 顯式創(chuàng)建props及其傳遞過來的屬性props: ['msg', 'myMsg'],template: '<h1>這是 hello 組件，這是消息：{{msg}} --- {{myMsg}}</h1>'}}
</script>// demo2傳遞對(duì)象或數(shù)組
// 父組件定義傳遞參數(shù)
<template><office :messageObj='message'></office>
</template>export default {data() {return {message:{tabs:1,ids:['31','32']},}}}// 子組件中相應(yīng)接收
<script>export default {data() {return {props:['messageObj']}}}
</script>
二、子組件到父組件
- 方式：父組件給子組件傳遞一個(gè)函數(shù)，由子組件調(diào)用這個(gè)函數(shù)
- 說明：借助vue中的自定義事件（v-on:cunstomFn="fn"）
- $emit()：觸發(fā)事件
<hello @pfn="parentFn"></hello><script>new Vue({methods: {// 父組件：提供方法parentFn(data) {console.log('父組件：', data)}}})Vue.component('hello', {template: '<button @click="fn">按鈕</button>',methods: {// 子組件：通過$emit調(diào)用fn() {this.$emit('pfn', '這是子組件傳遞給父組件的數(shù)據(jù)')}}})
</script>
三、非父子組件通訊
在簡單的場景下，可以使用一個(gè)空的 Vue 實(shí)例作為事件總線
var bus = new Vue()// 觸發(fā)組件 A 中的事件
bus.$emit('id-selected', 1)// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件
bus.$on('id-selected', function (id) {// ...
})
<!-- 組件A： -->
<com-a></com-a>
<!-- 組件B： -->
<com-b></com-b><script>var bus = new Vue()var vm = new Vue({el: '#app',components: {comA: {template: '<button @click="emitFn">告訴B</button>',methods: {emitFn() {bus.$emit('tellComB', '土豆土豆我是南瓜')}}},comB: {template: '<p>組件A告訴我：{{msg}}</p>',data() {return {msg: ''}},created() {bus.$on('tellComB', (msg) => {this.msg = msg})}}}})
</script>
四、動(dòng)態(tài)組件 - component
- 作用：渲染一個(gè)“元組件”為動(dòng)態(tài)組件。依 is 的值，來決定哪個(gè)組件被渲染。
<!-- 動(dòng)態(tài)組件由 vm 實(shí)例的屬性值 `componentId` 控制 -->
<component :is="componentId"></component><script>
// 兩個(gè)組件：
Vue.component('home', {template: '<h1>這是 Home 組件</h1>'
})
Vue.component('login', {template: '<h1>這是 Login 組件</h1>'
})data: {componentId: 'home'
}
</script>
五、獲取子組件，并且可以使用其中的屬性和方法
<body><div id="app"><!-- 通過給 html元素 添加一個(gè)特殊的 ref 屬性，將來就可以直接通過 $refs.dv 來獲取到當(dāng)前的DOM對(duì)象 --><!-- <div ref="dv"></div> --><hello ref="he"></hello></div><script src="./vue.js"></script><script>var vm = new Vue({el: '#app',data: {},components: {hello: {template: `<h1>這是 Hello 組件</h1>`,data() {return {msg: '這是 組件Hello 中的msg 屬性'}}}},created() {// 為什么在 created 中獲取不到 DOM對(duì)象？？？// console.log(this.$refs.dv);},mounted() {// console.log(this.$refs.dv);// 獲取組件，同時(shí)組件中的數(shù)據(jù)或方法都能夠獲取到// console.log(this.$refs.he);console.log(this.$refs.he.msg);}})</script>
轉(zhuǎn)載于:https://my.oschina.net/shuaihong/blog/1553764
總結(jié)
以上是生活随笔為你收集整理的vue组件通讯的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
