元件與元件之間的通訊以及vue2.0中的變化、示例
阿新 • • 發佈:2019-02-19
vue1.0
<template>
<div id="app">
<p>{{title}}</p>
<p v-text="title"></p>
<p v-text="title2"></p>
<p v-html="title2"></p>
</div>
</template>
<script>
export default {
data () {
return {
title: 'this is a title!' ,
title2: '<span>?<span> this is a title!'
}
}
}
</script>
{{title}}
和v-text="title"
等同export default
最後生成new vue({ 引數})
-
新的ES6寫法等同於舊的寫法
//新的ES6 data () { return { title: 'this is a title!' } }
//舊的寫法 data: function (){ return { title: 'this is a title!' } }
-
v-html
解析渲染html標籤
v-for 及v-bind控制class、v-on繫結事件、v-model雙向繫結
<template>
<div id="app">
<p>{{title}}</p>
<!-- <p v-text="title"></p> -->
<!-- <p v-text="title2"></p> -->
<!-- <p v-html="title2"></p> -->
<input v-model="newItem" v-on:keyup.enter="addNew">
<ul>
<li v-for = "item in items" v-bind:class="{finished: item.isFinished}" v-on:click="toggleFinished(item)">
{{item.label}}
</li>
</ul>
</div>
</template>
<script>
import Store from './store'
export default {
data () {
return {
title: 'this is a todolist!',
title2: '<span>?<span> this is a todolist!',
items: Store.fetch(),
newItem: ''
}
},
watch: {
items: {
handler (items) {
Store.save(items)
},
deep: true
}
},
methods: {
toggleFinished (item) {
item.isFinished = !item.isFinished
},
addNew () {
this.items.push({
label: this.newItem,
isFinished: false
})
this.newItem = ''
}
}
}
</script>
<style>
.finished{
text-decoration: underline;
}
html {
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#app {
color: #2c3e50;
margin-top: -100px;
max-width: 600px;
font-family: Source Sans Pro, Helvetica, sans-serif;
text-align: center;
}
#app a {
color: #42b983;
text-decoration: none;
}
.logo {
width: 100px;
height: 100px
}
</style>
store.js
const STORAGE_KEY = 'todos-vuejs'
export default {
fetch () {
return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
},
save (items) {
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
}
}
v-bind:class
簡寫:class
v-on:click
簡寫@click
v-on:keyup.enter
簡寫@keyup.enter
回車keyup事件v-model
雙向繫結
JSON.parse()和JSON.stringify()
parse
用於從一個字串中解析出json 物件。例如
var str='{"name":"cpf","age":"23"}'
經 JSON.parse(str) 得到:
Object: age:"23"
name:"cpf"
_proto_:Object
ps:單引號寫在{}外,每個屬性都必須雙引號,否則會丟擲異常
stringify
用於從一個物件解析出字串,例如
var a={a:1,b:2}
經 JSON.stringify(a)得到:
“{“a”:1,"b":2}”
自定義事件
-
使用 $on() 監聽事件;
-
使用 $emit()在它上面觸發事件;
-
使用 $dispatch()派發事件,事件沿著父鏈冒泡;
-
使用 $broadcast()廣播事件,事件向下傳導給所有的後代。
父元件向子元件傳遞
1、採用props
父元件
<component-a msgfromfather='you die!!!!'></component-a>
子元件
<template>
<div class="hello">
<h1>{{ msgfromfather }}</h1>
<button v-on:click="onClickMe">click!</button>
</div>
</template>
<script>
export default {
data () {
return {
}
},
props: ['msgfromfather'],
methods: {
onClickMe () {
console.log(this.msgfromfather)
}
}
}
</script>
<style scoped>
h1 {
color: #42b983;
}
</style>
- props監聽父元件傳遞過來的資訊
- 傳遞過來後,可直接引用,就如已經傳遞過來資料塞到data
2、使用event,$broadcast()從父元件傳遞訊息下去
父元件
<template>
<button v-on:click="talkToMyBoy('be a good boy')">talkToMyBoy</button>
</div>
</template>
<script>
import Store from './store'
import ComponentA from './components/componentA'
export default {
components: {
ComponentA
},
methods: {
talkToMyBoy (msg) {
//console.log(msg);
this.$broadcast('onAddnew',msg)
}
}
}
</script>
子元件
<template>
<div class="hello">
<h1>{{ listentomyfather }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
listentomyfather: 'Hello from componentA!'
}
},
events: {
'onAddnew' (msg) {
//console.log(msg)
this.listentomyfather = msg
}
}
}
</script>
子元件向父元件傳遞
1.子元件$emit()觸發,父元件$on()監聽
<template>
<div class="hello">
<button v-on:click="onClickMe">telltofather</button>
</div>
</template>
<script>
export default {
methods: {
onClickMe () {
this.$emit('child-tell-me-something',this.msg)
}
}
}
</script>
父元件
<template>
<div id="app">
<p>child tell me: {{childWords}}</p>
<component-a v-on:child-tell-me-something='listenToMyBoy'></component-a>
</div>
</template>
<script>
import Store from './store'
import ComponentA from './components/componentA'
export default {
components: {
ComponentA
},
data () {
return {
childWords: ''
}
},
methods: {
listenToMyBoy (msg) {
this.childWords = msg
}
}
}
</script>
2.不使用v-on,使用event ,子元件$dispatch(),從子元件傳遞訊息上去
子元件
<template>
<div class="hello">
<button v-on:click="onClickMe">talktomyfather</button>
</div>
</template>
<script>
export default {
methods: {
onClickMe () {
this.$dispatch('child-tell-me-something',this.msg)
}
}
}
</script>
父元件
<template>
<div id="app">
<p>child tell me: {{childWords}}</p>
<component-a></component-a>
</div>
</template>
<script>
import Store from './store'
import ComponentA from './components/componentA'
export default {
components: {
ComponentA
},
data () {
return {
childWords: ''
}
},
events: {
'child-tell-me-something' (msg) {
this.childWords = msg
}
}
}
</script>
文/_洪小瑤(簡書作者)
原文連結:http://www.jianshu.com/p/240125faeb79
著作權歸作者所有,轉載請聯絡作者獲得授權,並標註“簡書作者”。