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

程序员文章站 2024-01-01 07:58:52

vue中我们常常用到组件：父子组件之间的传值如何传值的呢1、父组件向子组件传值你可以给子组件传入一个值，用v-bind绑定子组件要显式的用props选项声明它预期的数据Vue.component('menu-item', { props: ['title', 'content'], data: function() { r...

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: '<div>{{msg + "----" + title + "-----" + content}}</div>'
    });
    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: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
          <button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        parr: ['apple','orange','banana'],
        fontSize: 10
      },
      methods: {
        handle: function(){
          // 扩大字体大小
          this.fontSize += 5;
        }
      }
    });
  </script>
</body>

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

本文地址：https://blog.csdn.net/xieyuleisss/article/details/107509132

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

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

详解VUE中的插值( Interpolation)语法

thinkphp怎么在不同的Action类的不同函数之间传值

父子组件之间传递Function,在vue组件中callback的应用

Vue中datepicker插件无法监听datepicker输入框的值问题

Vue2.x中的父组件传递数据至子组件的方法

在vue-music中关于Player播放器组件的使用说明

.net C#中页面之间传值传参的六种方法

Android 入门第十讲02-广播（广播概述，使用方法（系统广播，自定义广播，两个activity之间的交互和传值），EventBus使用方法，数据传递，线程切换，Android的系统广播大全）

react 组件传值的三种方法