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简写:classv-on:click简写@clickv-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>