父传子:Props
子传父:子:$emit(eventName) 父 $on(eventName)
父访问子:ref
非父子组件通信
:https://vuefe.cn/guide/components.html# 非父子组件通信
vue2.0 移除:1.$dispatch() 2.$broadcast() 3.events
- <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
- data() {
- return {
- title: 'this is a title ! '
- }
- }
- //旧的写法
- data: function() {
- return {
- title: 'this is a title ! '
- }
- }
解析渲染 html 标签
- v-html
- <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 事件
- @keyup.enter
双向绑定
- v-model
用于从一个字符串中解析出 json 对象。例如
- parse
经 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}"
父组件
- <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>
父组件
- <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>
- <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>
子组件
- <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.bubuko.com/infodetail-2252273.html