vue-4 父子组件间传值与方法

最新推荐文章于 2024-01-28 21:17:33 发布

weixin_43074997

最新推荐文章于 2024-01-28 21:17:33 发布

阅读量529

点赞数

分类专栏：理解经验文章标签： vue-4 父子组件间传值与方法

本文链接：https://blog.csdn.net/weixin_43074997/article/details/97519697

版权

经验同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

理解

31 篇文章 0 订阅

订阅专栏

组件-父组件向子组件传值

定义模板：直接声明字面量或者用在vue中用comsption[ com() ]

在com1中（子组件）要使用父组件中的数据，需要自定义一个属性
然后在子组件中用 props ： [自定义属性名字] 定义才能使用
而且在子组件的数据不提倡在子组件里利用methods修改

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

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

</html>

父元素把方法传递给子元素

在定义的字面量模板引用中传值可以用v-bind 的方法绑定，但是方法不行，要自定义一个方法 v-on: func = “show”
然后在模板template中的按钮或者别的给它绑定点击函数
这个函数是模板里的，所以在字面量模板里的methods中设置方法
运用

 //  emit 英文原意： 是触发，调用、发射的意思
          // this.$emit('func123', 123, 456)
          this.$emit('func', this.sonmsg)

方法来触发函数调用 func是自定义绑定函数的名字，this.sonmsg是传过来的参数
传进来后在父组件的函数里也就能获取到，并返回给子组件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<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>

</html>

weixin_43074997

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-4 父子组件间传值与方法

组件-父组件向子组件传值定义模板：直接声明字面量或者用在vue中用comsption[ com() ]在com1中（子组件）要使用父组件中的数据，需要自定义一个属性然后在子组件中用 props ： [自定义属性名字] 定义才能使用而且在子组件的数据不提倡在子组件里利用methods修改<!DOCTYPE html><html lang="en"><h...
复制链接

扫一扫