vue 组件之间传值

最新推荐文章于 2022-10-05 14:22:19 发布

lannieZ

最新推荐文章于 2022-10-05 14:22:19 发布

阅读量121

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/lannieZ/article/details/102557158

版权

vue 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

父组件向子组件传值

在普通标签上绑定自定义属性 :‘自定义属性’=“父组件的数据”
通过子组件的props:[‘自定义属性’] 来接收
在这里插入图片描述

props属性名规则

1、在props中使用驼峰形式，模板中需要使用短横线的形式
2、字符串的模板中没有这个限制

props属性名规则

1、字符串 String
2、数值 Number
3、布尔值 Boolean
4、数组 Array
5、对象 Object

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>{{pmsg}}</div>
    <menu-item title='来自父组件的值'></menu-item>
    <menu-item :title='ptitle' content='hello'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      父组件向子组件传值-基本使用
    */
    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: '动态绑定属性'
      }
    });
  </script>
</body>
</html>

浏览器效果
在这里插入图片描述

// 父组件调用子组件的方法
// 在子组件上添加ref="child"
// 父组件定义一个方法
// 通过this.$refs.child.clearContent();
// clearContent()是子组件其中的一个方法

子组件向父组件传值

给子组件添加事件然后接收值为 this.$emit(‘在普通标签上的事件’,要传的数据)
子组件触发事件后紧接着会触发父组件上的自定义事件
然后子组件传递过来的参数也被获取到
可以在父组件方法中提取操作
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<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>
</html>

子组件向父组件携带参数传值
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
    <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      子组件向父组件传值-携带参数
    */
    
    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", 5)'>扩大父组件中字体大小</button>
          <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        parr: ['apple','orange','banana'],
        fontSize: 10
      },
      methods: {
        handle: function(val){
          // 扩大字体大小
          this.fontSize += val;
        }
      }
    });
  </script>
</body>
</html>

兄弟组件传值

核心代码：methods: {
handle：function() {hub. $KaTeX parse error: Expected 'EOF', got '}' at position 21: \dots'另一个兄弟元素事件', 2)}̲}, //hub事件中心空\dots$ on(‘自己的事件’, (val) => {this.num += val;});
}
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>父组件</div>
    <div>
      <button @click='handle'>销毁事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      兄弟组件之间数据传递
    */
    // 提供事件中心
    var hub = new Vue();

    Vue.component('test-tom', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          hub.$emit('jerry-event', 2);
        }
      },
      mounted: function() {
        // 监听事件
        hub.$on('tom-event', (val) => {
          this.num += val;
        });
      }
    });
    Vue.component('test-jerry', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          // 触发兄弟组件的事件
          hub.$emit('tom-event', 1);
        }
      },
      mounted: function() {
        // 监听事件
        hub.$on('jerry-event', (val) => {
          this.num += val;
        });
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        handle: function(){
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }
    });
  </script>
</body>
</html>

lannieZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 组件之间传值

父组件向子组件传值在普通标签上绑定自定义属性 :‘自定义属性’=“父组件的数据”通过子组件的props:[‘自定义属性’] 来接收props属性名规则1、在props中使用驼峰形式，模板中需要使用短横线的形式2、字符串的模板中没有这个限制props属性名规则1、字符串 String2、数值 Number3、布尔值 Boolean4、数组 Array5、对象 ...
复制链接

扫一扫

专栏目录