Vue（3）

最新推荐文章于 2023-04-20 17:33:30 发布

ygj0727

最新推荐文章于 2023-04-20 17:33:30 发布

阅读量77

点赞数

分类专栏：前端基础摘要

本文链接：https://blog.csdn.net/ygj0727/article/details/104927503

版权

前端基础摘要专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Vue组件之间传值
（1）父组件向子组件传值
理解
1.1、Model部分新创建的vm实例可以看作一个组件，即父组件，在内部定义的components是它的子组件。

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123 啊-父组件中的数据'
      },
      methods: {},

      components:
        com1: {
          template: '<h1>这是子组件 --- {{ parentmsg }}</h1>',
          props: ['parentmsg'],
          methods: {
            change() {
              this.parentmsg = '被修改了'
            }
          }
        }
      }
    });
  </script>

1.2、view部分 div#app 受父组件控制，里面的com1受子组件控制。

<div id="app">
    <com1></com1>
  </div>

1.3、子组件中，默认无法访问父组件中 data 中的数据和 method中的方法
那如何将父组件的值传递给子组件呢？
2.1、在view部分通过属性绑定的（v-bind)的形式，把需要传给子组件的数据，以属性绑定的方式，传递给子组件

<div id="app">
    <com1 v-bind:parentmsg="msg"></com1>
  </div>

2.2、model部分，在子组件template中获取父组件传给子组件的属性，
不过要注意父组件传过来的属性，现在props数组中，定义一下，这样才能使用数组，不然会报错

components: {
        com1: 
          template: '<h1>这是子组件 --- {{ parentmsg }}</h1>',
          props: ['parentmsg'], 
        }
      }

子组件中data数据与props数据的区别

子组件中的 data 数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；
组件中的所有 props 中的数据，都是通过父组件传递给子组件的
data 上的数据，都是可读可写的；
props 中的数据，都是只读的，无法重新赋值，赋值会报错


<body>
  <div id="app">
   
    <com1 v-bind:parentmsg="msg"></com1>
  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123 啊-父组件中的数据'
      },
      methods: {},

      components: {
        // 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
        com1: {
          data() { // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；
            // data 上的数据，都是可读可写的；
            return {
              title: '123',
              content: 'qqq'
            }
          },
          template: '<h1 @click="change">这是子组件 --- {{ parentmsg }}</h1>',
          // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
        
          props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
          directives: {},
          filters: {},
          components: {},
          methods: {
            change() {
              this.parentmsg = '被修改了'
            }
          }
        }
      }
    });
  </script>

（3）父组件向子组件传递方法（子组件向父组件传值）
父组件向子组件传递方法：
model部分在父组件定义一个方法show(),
view部分父组件通过事件绑定机制向子组件传递方法
model部分子组件调用父组件方法（通过emit方法）
view部分子组件点击触发该方法
子组件向父组件传值：父组件向子组件传递方法的同时，把要发送给父组件的数据，在调用方法的时候当作参数传递进去；

<body>
  <div id="app">
   
    <com2 @func="show"></com2>
  </div>

  <template id="tmpl">
    <div>
      <h1>这是 子组件</h1>
      <input type="button" value="这是子组件中的按钮 - 点击它，触发 父组件传递过来的 func 方法" @click="myclick">
    </div>
  </template>

  <script>

    // 定义了一个字面量类型的 组件模板对象
    var com2 = {
      template: '#tmpl', 
      data() {
        return {
          sonmsg: { name: '小头儿子', age: 6 }
        }
      },
      methods: {
        myclick() {
  
          //  emit 英文原意： 是触发，调用、发射的意思
          // this.$emit('func123', 123, 456)
          this.$emit('func', this.sonmsg)
        }
      }
    }


    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        datamsgFormSon: null
      },
      methods: {
        show(data) {
          // console.log('调用了父组件身上的 show 方法: --- ' + data)
          // console.log(data);
          this.datamsgFormSon = data
        }
      },

      components: {
        com2
        // com2: com2
      }
    });
  </script>

ygj0727

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue（3）

Vue组件之间传值（1）父组件向子组件传值理解1.1、Model部分新创建的vm实例可以看作一个组件，即父组件，在内部定义的components是它的子组件。<script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '123...
复制链接

扫一扫