vue父子组件传参

父组件传给子组件

在父元素parent.vue中：

<template>
  <Child :parentToChild="parentToChild" />
</template>

<script>
import Child from "./child";
export default {
    name: "parent",
    components: { Child },
    data() {
        return {
            parentToChild: "我是父组件里面的数据"
        };
    }
};
</script>

在子元素child.vue中：

<template>
  <div>{{parentToChild}}</div>
</template>

<script>
export default {
    name: "Child",
    //props: ["parentToChild"]
    props: {
        parentToChild: String
    }
};
</script>

父子传参是通过props来传递的，切记props中从父级引入的数据都是不能在子元素组件中修改的

如果父组件要调用子组件中的方法时，应该如何呢？

这个时候就要用到ref了，给子组件添加一个ref然后通过获取ref节点，就可以调用子组件中的方法了

在parent.vue中：

<template>
    <div>
        <Child ref="child" />
        <div @click="click">获取儿子中的方法</div>
    </div>
</template>

<script>
import Child from "./child";
export default {
    name: "parent",
    components: { Child },
    methods: {
        click() {
            this.$refs.child.click(); //输出：子组件中的方法
        }
    }
};
</script>

在child.vue中：

<template>
    <div>儿子</div>
</template>

<script>
export default {
    name: "Child",
    methods: {
        click() {
            console.log("子组件中的方法");
        }
    }
};
</script>

子组件传给父组件

在父组件parent.vue中：

<template>
  <Child @toParent="parentMethod" />
</template>

<script>
import Child from "./child";
export default {
    name: "parent",
    components: { Child },
    methods: {
        parentMethod(val) {
            console.log("子组件触发");
            console.log(val); //爸爸，你好
        }
    }
};
</script>

在父组件中自定义一个toParent事件

在子组件child.vue中：

<template>
  <div @click="click">点击</div>
</template>

<script>
export default {
    name: "Child",
    methods: {
        click() {
            this.$emit("toParent", "爸爸，你好");
        }
    }
};
</script>

子组件中通过this.$emit来触发父组件中自定义事件toParent,并且传递参数过去，父组件中可以接收子组件传过来的参数