vue学习笔记——父子组件传值，父传子，子传父

chen_sir_sh

已于 2022-11-30 09:10:40 修改

阅读量661

点赞数 1

分类专栏： vue学习笔记文章标签： vue.js javascript 前端

于 2021-12-21 18:19:55 首次发布

本文链接：https://blog.csdn.net/m54584mnkj/article/details/121751730

版权

vue学习笔记专栏收录该内容

29 篇文章 2 订阅

订阅专栏

父组件向子组件传值

父组件定义一个自定义属性，把父组件内的值放在属性对应的value上。
子组件通过props进行接收父组件的属性。

父组件：

<globalHeader :parentName='name'></globalHeader>

<script>
import globalHeader from "./component/header/global-header.vue";
export default {
  name: "app",
  data(){
    return {
      name:"Bob"
    }
  },
  components: {
    globalHeader,
  },
};
</script>

子组件：

<template>
	<div>
  		{{parentName}}
	</div>
</template>

<script>
export default {
  name: "GlobalHeader",
  props:['parentName']
};
</script>

props有两种接受方法，
1.用数组接收数据。不限制数据类型

  props:['parentName'],

2.用对象接受数据。可以对数据类型进行限制；

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true,
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100,
    },
    // 数组写法
    propK: {
      type: Array,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return ["张三"];
      },
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: "hello" };
      },
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ["success", "warning", "danger"].indexOf(value) !== -1;
      },
    }
  }

子组件向父组件传值

子组件发射一个自定义事件，
this.$emit(“number”, this.childCounter)；
这里的number就是发射的自定义事件，this.childCounter就是需要传给父组件的数据。

在父组件引入的地方，绑定上这个number事件，是@ + 事件，在父组件创建一个函数来接收值。
然后通过参数来输出子组件的值，就可以完成子组件向父组件的传值。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <div>
            父组件的值：{{parentCounter}}
        </div>
        <div>
            <child-component @number="getParentData">
            </child-component>
        </div>
    </div>



</body>
<script>
    const app = Vue.createApp({})
    const Counter = {
        data() {
            return {
                parentCounter: "还未获取子组件的值"
            }
        },
        component: {
            "child-component": "child-component"
        },
        methods: {
            getParentData(res) {
                this.parentCounter = res
            }
        }
    }
    var childObj = {
        data() {
            return {
                childCounter: 0
            }
        },
        methods: {
            addCounter() {
                this.childCounter++
                this.$emit("number", this.childCounter)
            }
        },
        template: `
        <div>子组件的值：{{childCounter}}</div>
        <div>
            <span>我是子组件的点击按钮</span>
            <button @click=addCounter>
            点击
            </button>
        </div>`
    }
    Vue.createApp(Counter).component('child-component', childObj).mount('#app')
</script>

</html>

chen_sir_sh

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记——父子组件传值，父传子，子传父

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
复制链接

扫一扫