zoukankan      html  css  js  c++  java
  • Vue 父组件与子组件之间的通信

    1.父组件把数据传递给子组件

    prop 是父组件用来传递数据的一个自定义属性。

    父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop"


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 父组件传递数据到子组件</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <ol>
        <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
        </ol>
    </div>
    
    <script>
    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'
    })
    new Vue({
      el: '#app',
      data: {
        sites: [
          { text: '张三' },
          { text: '李四' },
          { text: '王五' }
        ]
      }
    })
    </script>
    </body>
    </html>

    2.子组件把数据传递给父组件

    父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件!

    我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即:

    • 使用 $on(eventName) 监听事件
    • 使用 $emit(eventName) 触发事件

    另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

    以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。


    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue - 子组件传递数据到父组件</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
    <div id="app">
    	<div id="counter-event-example">
    	  <p>{{ total }}</p>
    	  <button-counter v-on:increment="incrementTotal"></button-counter>
    	  <button-counter v-on:increment="incrementTotal"></button-counter>
    	</div>
    </div>
    
    <script>
    Vue.component('button-counter', {
      template: '<button v-on:click="increment">{{ counter }}</button>',
      data: function () {
        return {
          counter: 0
        }
      },
      methods: {
        increment: function () {
          this.counter += 1
          this.$emit('increment')
        }
      },
    })
    new Vue({
      el: '#counter-event-example',
      data: {
        total: 0
      },
      methods: {
        incrementTotal: function () {
          this.total += 1
        }
      }
    })
    </script>
    </body>
    </html>

  • 相关阅读:
    形象的理解Strong和Weak
    iOS开发中常见的一些异常
    离屏渲染
    如何从海量IP中提取访问最多的10个IP
    XJOI3363 树3/Codeforces 682C Alyona and the Tree(dfs)
    XJOI 3578 排列交换/AtCoder beginner contest 097D equal (并查集)
    XJOI 3605 考完吃糖(DAG图dfs)
    POJ 3660 Cow Contest(传递闭包)
    XJOI 3601 技能(贪心+二分)
    51nod 1421 最大MOD值(高妙的调和级数复杂度)
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924970.html
Copyright © 2011-2022 走看看