【父子组件传值】

最新推荐文章于 2024-05-14 20:49:55 发布

红色波浪号

最新推荐文章于 2024-05-14 20:49:55 发布

阅读量72

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_72815229/article/details/127834512

版权

在父组件标签中的子组件标签中利用冒号传值，在子组件中使用props接收

<body>
  <div id='app'>
    <father :age="age1"></father>
  </div>
  <template id="father">
    <son :type="typevalue" :age2="age3"></son>

  </template>
  <template id="son">

  </template>

  <script>
    Vue.component('father', {
      template: '#father',
      data(){
        return {
          typevalue: '我是父组件传值子组件',
          age3:this.age
        }
      },
      props: {
        age: Number
      },
      created(){
        console.log(this.age);
      }
    })
    Vue.component('son', {
      template: '#son',
      props: {
        type: String,
        age2:Number
      },
      created() {
        console.log(this.type);
        console.log(this.age2);
      }
    })
    const vm = new Vue({
      el: '#app',
      data: {
        age1:18
      },
      methods: {
      }
    })
  </script>
</body>

</html>

在子组件标签中，定义一个自定义方法，在父组件中用这个方法来接收传的的值，在子组件中，用this.$emit方法传递数据，名称和自定义的方法名称相对应

<body>
  <div id='app'>
    <father></father>
  </div>
  <template id="father">
    <!-- <son @send="value"></son> -->
    <!-- <son @send="value($event)"></son> -->
    <son @send="value($event,$event,12,m)"></son>
    <!-- $event 只接受第一个值 -->
  </template>
  <template id="son">

  </template>

  <script>
    Vue.component('father', {
      template: '#father',
      data() {
        return {
          m: 55
        }
      },
      methods: {
        value(data,data2,data3) {
          console.log(data, data2, data3);
        }
      },
      created() {
      }
    })
    Vue.component('son', {
      template: '#son',
      created() {
        this.$emit('send', '857')
      }
    })
    const vm = new Vue({
      el: '#app',
      methods: {
      }
    })
  </script>
</body>

</html>