vue中组件通讯--父到子

  1. 在子组件标签上添加一个属性(ppp)
  2. 在子组件中通过 props 属性,来接受这个数据
  3. 就可以使用接受到的 ppp 数据了
  <!-- 父组件的模板 -->
  <div id="app">
    <!-- 子组件的模板 -->
    <hello ppp="18" gender="male" :parent-msg="msg"></hello>
  </div>

  <script src="./vue.js"></script>
  <script>
    // 1 父到子
    // 父组件:vm实例
    // 子组件:hello组件
    const vm = new Vue({
      el: '#app',
      data: {
        msg: '这是 Vue 实例提供的数据'
      },
      components: {
        hello: {
          template: `
            <div>这是 Hello 子组件 -- {{ ppp }} | {{ gender }} | {{ parentMsg }}</div>
          `,

          // 通过 props 属性,来指定该组件接受的数据
          // props 的使用方式与 data 相同
          props: ['ppp', 'gender', 'parentMsg']
        }
      }
    })
  </script>
posted @ 2019-03-13 14:26  木石天涯  阅读(178)  评论(0编辑  收藏  举报