Vue元件與元件間通訊

註冊之後才能使用，註冊分區域性註冊和全域性註冊

元件和vue例項類似，基本可以使用其所有內容（data,computed,methods,filters,watch)

與vue例項不同，data是函式，輸入需要return

全域性註冊

showtitle>
charset="utf-8">
head>
my-component>
div>
src="">
script>
vue.component('component', )
new vue()
script>
body>
html>

showtitle>
charset="utf-8">
head>
my-component>
div>
src="">
script>
var component = 
new vue(
})script>
body>
html>

元件不僅僅是要把模板的內容進行復用，更主要的是元件間要進行通訊。通常父元件的模板中包含子元件，父元件要正向的向子元件傳遞資料或引數，子元件接收到後根據引數的不同來渲染不同的內容或執行操作。這個正向傳遞資料的過程，就是通過props來實現的。

showtitle>
charset="utf-8">
head>
:name="auctor"
:test="888">
my-component>
div>
src="">
script>
var component = } } }
`,props: ,
test: }},
data() 
}} new vue(,
data() }})
script>
body>
html>

其中 props中的內容是有資料型別驗證的

1. string

2. number

3. boolean

4. object

5. array

6. function

7. symbol

// props 的具體寫法

props: ,
datad: ,
datae: 
},dataf: 
}}

父元件使用 v-on:=』methodname』 來監聽事件冒泡，從而獲取子元件的上傳的資料

showtitle>
charset="utf-8">
head>
:name="auctor"
v-on:reserve='handlereservename'>
my-component>
div>
src="">
script>
var component = } 
`,props: ,
data() 
},methods: 
}} new vue(,
data() 
},methods: }})
script>
body>
html>

使用 watch 來對監聽props，從而對屬性重新賦值

showtitle>
charset="utf-8">
head>
this is father num: }
father addbutton>
:num="num"
v-on:add='handleadd'>
my-component>
div>
src="">
script>
var component = } "handleadd">child adddiv>`,
props: ,
data() 
},// watch 部分是核心**，可以注釋試試效果
watch: 
},methods: 
}} new vue(,
data() 
},methods: ,
handlefatheradd: function
() }
})script>
body>
html>

非父子關係的兩個元件之間也需要通訊。在簡單的場景下，可以使用乙個空的 vue 例項作為事件匯流排：

showtitle>
charset="utf-8">
head>
}my-component>
div>
src="">
script>
var middle = new vue()
var component = 
}} new vue(,
data() 
},mounted() )}})
script>
body>
html>

showtitle>
charset="utf-8">
head>
:count="5">
my-component>
div>
src="">
script>
var middle = new vue()
var component = }div>`,
props: ,
name: 'mycomponent' // 核心**
} new vue(,
data() }})
script>
body>
html>

vue元件間通訊

1 父元件向子元件傳遞資料，只需要props就行。設定資料並繫結到元件上。子元件用props接收，就能在元件內部使用獲取到的資料 反向通訊則需要在父級元件上自定義對應的方法，子元件使用 emit呼叫父元件方法，並上傳資料 content date content.vue date.vue 上面這個例...

vue元件間通訊

參考文章 vue父子元件間通訊可以用prop完成，跨級通訊則要用attrs來實現。1.attrs實現跨級通訊 父親元件 father元件 p msg1 p msg1 msg1 msg2 msg2 msg3 msg3 msg4 msg4 title 乙個標題 son1 div template imp...

vue元件間通訊

a元件要傳遞資料給b元件 a元件是有資料的，b元件是需要資料的 vue的各個元件data是不共享的，但是我們有時需要傳遞資料，那麼就可以使用vuex的store，store是乙個物件，裡面有個state，用來儲存多個元件需要使用的資料 我們先定義資料 在store的state中，定義資料 然後 在s...