Vue入门到放弃22(vue组件-父子组件传值)

最新推荐文章于 2021-07-09 01:24:04 发布

开猿节流

最新推荐文章于 2021-07-09 01:24:04 发布

阅读量203

点赞数

本文为博主原创文章，未经博主允许不得转载。交流联系QQ：634487911

本文链接：https://blog.csdn.net/qq_38191191/article/details/103480370

版权

Vue父子组件传值

父组件传值给子组件

2.效果实现

1.父组件，可以在引用子组件的时候，通过 属性绑定（v-bind:）的形式, 把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用

2.在子组件中有个 props 属性，该属性中保存的都是父组件传递给子组件的数据，注意：props 中的数据，都是只读的，无法重新赋值

3.我们在子组件中使用在 props中保存的数据

效果：

<body>
  <div id="app">
    <!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
    <com1 v-bind:parentmsg="msg"></com1>
  </div>
  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123 啊-父组件中的数据'
      },
      methods: {},

      components: {
        // 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
        com1: {        
          template: '<h1>这是子组件 --- {{ parentmsg }}</h1>',
          // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
          // props 中的数据，都是只读的，无法重新赋值
          props: ['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
        }
      }
    });
  </script>
</body>

子组件传值给父组件

与上面的例子相反，我们想要将子组件的数据传递给父组件，这时怎么办呢？我们可以通过将父组件中的方法传递给子组件调用，然后通过传参的形式来实现数据的传递效果，具体如下

1.首先在父组件中创建了一个 show 方法，该方法的作用是将获取的参数赋值给 Vue实例中的 data 中的 msg

2.父组件向子组件传递方法是通过 v-on 绑定机制来实现的，当我们自定义了一个事件属性之后，那么，子组件就能够，通过某些方式，来调用传递进去的这个方法了

3.组件的 data 中定义数据

4.组件的 methods中定义方法，emit 英文原意：是触发，调用、发射的意思，可以来实现方法的调用及传值

5.子组件中触发方法调用

6.实现效果

å¨è¿éæå¥å¾çæè¿°

<body>
  <div id="app">
    <!-- 父组件向子组件 传递 方法，使用的是 事件绑定机制； v-on, 当我们自定义了 一个 事件属性之后，那么，子组件就能够，通过某些方式，来调用 传递进去的 这个 方法了 -->
    <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', // 通过指定了一个 Id, 表示 说，要去加载 这个指定Id的 template 元素中的内容，当作 组件的HTML结构
      data() {
        return {
          sonmsg: { name: '小头儿子', age: 6 }
        }
      },
      methods: {
        myclick() {
          // 当点击子组件的按钮的时候，如何 拿到 父组件传递过来的 func 方法，并调用这个方法？？？
          //  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>
</body>

开猿节流

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门到放弃22(vue组件-父子组件传值)

Vue父子组件传值父组件传值给子组件2.效果实现1.父组件，可以在引用子组件的时候，通过属性绑定（v-bind:）的形式, 把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用2.在子组件中有个props属性，该属性中保存的都是父组件传递给子组件的数据，注意：props 中的数据，都是只读的，无法重新赋值3.我们在子组件中使用在...
复制链接

扫一扫