Vue中的父子组件之间的传值

vue中我们常常用到组件:父子组件之间的传值如何传值的呢

1、父组件向子组件传值

你可以给子组件传入一个值,用v-bind绑定

 <menu-item :title='ptitle' content='hello'></menu-item>

子组件要显式的用props选项声明它预期的数据

Vue.component('menu-item', {
      props: ['title', 'content'],
      data: function() {
        return {
          msg: '子组件本身的数据'
        }
      },
      template: '
{{msg + "----" + title + "-----" + content}}
'
}); var vm = new Vue({ el: '#app', data: { pmsg: '父组件中内容', ptitle: '动态绑定属性' } });

2、子组件向父组件传值
由于在vue中子组件不能更改父组件中的内容,所以可以通过子组件触发事件来传值给父组件。
子组件:通过$emit()方法发布事件广播
父组件:捕获到子组件向外触发的事件,然后可执行相应的方法

<body>
  <div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
    <menu-item :parr='parr' @enlarge-text='handle'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      子组件向父组件传值-基本用法
      props传递数据原则:单向数据流
    */
    
    Vue.component('menu-item', {
      props: ['parr'],
      template: `
        
  • {{item}}
`
}); var vm = new Vue({ el: '#app', data: { pmsg: '父组件中内容', parr: ['apple','orange','banana'], fontSize: 10 }, methods: { handle: function(){ // 扩大字体大小 this.fontSize += 5; } } }); </script> </body>

父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,

你可能感兴趣的:(Vue,vue)