vue2.0父子组件通信(慕课网)_综合

vue2.0

父传子：Props
子传父：子： $emit(eventName) 父$ on(eventName)
父访问子：ref
非父子组件通信 :https://vuefe.cn/guide/components.html#非父子组件通信
vue2.0 移除：1. $dispatch() 2.$ broadcast() 3.events

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>

vue2.0父子组件通信(慕课网)