vue组件数据传递

最新推荐文章于 2024-11-04 15:22:25 发布

soputasmile11

最新推荐文章于 2024-11-04 15:22:25 发布

阅读量116

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/u014473112/article/details/121048057

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、父传子

参考官网
（1）使用props传递
（2）prop说明(参考props )，类型：：①数组，数组里面是变量名字符串 ②对象，对象的key是变量名，value是变量的约束条件
（3）prop名字如果是驼峰写法，在html中需要用分隔符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
  {{con}}
  <!--html是大小写不敏感的，所以不能写成cMessage，会被自动转换成短线形式展示，参考官网解释：https://cn.vuejs.org/v2/guide/components-props.html-->
  <cpn :c-message="message" :c-con="con"></cpn>
</div>
<template id="cpn">
  <div>
    <h1>{{cMessage}}</h1>
    <p>{{cCon}}</p>
  </div>
</template>
<script>
//props的驼峰写法，参考官网（在html中要转换，在js代码拼接的时候就不需要了）
  const cpn = {
    template: '#cpn',
            // 数组写法
//          props: ['cMessage', 'con']
            //更多的是对象写法,
    props:{
      //注意的是这里的对象写法一定要写成这种形式（指定类型），如果只写cMessage一个字符串会报错，如果不想要指定类型可以使用数组的形式
      cMessage:  String,
      cCon: {
        type: Array,
        default:[]
      }
    }
  }
  const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        con:['活着','追风筝的人','被讨厌的勇气']
      },
      components: {
        cpn
      }

    })

</script>

</body>
</html>

2、子传父

实现思路：父组件监听子组件的自定义事件，参考官网，自定义事件详解：自定义事件
需要注意的是自定义事件的名字不要用驼峰写法，因为这个事件在父组件中的html无法识别（html大小写不敏感）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<div id="app">
  <cpn :num-tabs="tabs" @item-click="itemClickMeth"></cpn>
</div>
<template id="cpn">
  <div>
    <button v-for="item in numTabs" @click="requestData(item)">{{item.name}}</button>
  </div>
</template>
<script>

  const cpn = {
    template: '#cpn',
    props: {
      numTabs:Array
    },
    methods: {
      requestData(item) {
        //注意这里的item-click，不建议写成itemClick驼峰的形式，因为这种写了之后在父组件的html中是无法识别的（html大小写不敏感）
        this.$emit('item-click', item)
      }
    }
  }
  const app = new Vue({
      el: '#app',
      data: {
        message: '你好',
        tabs: [
          {id: 1, name: '我的'},
          {id: 2, name: '主页'},
          {id: 3, name: '云村'}
        ]
      },
      components: {cpn},
      methods: {
        itemClickMeth(item) {
          console.log('触发点击', item)
        }
      }
    })

</script>

</body>
</html>