vue2.0专题：通信

原文：http://www.jianshu.com/p/240125faeb79

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写法等同于旧的写法

  //新的ES6data () {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
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。