Vue-组件5 父组件给子组件传值

最新推荐文章于 2020-11-25 19:16:21 发布

Leisure Tea

最新推荐文章于 2020-11-25 19:16:21 发布

阅读量136

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/SevenSongyun/article/details/103648320

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue-组件5 父组件给子组件传值

一、传值方式1-props

实质

父组件给子组件传值，实上是给子组件的属性设置值。子组件通过该属性获取父组件传过来的值。
组件的props，来自定义组件的自定义属性

注意：

props是一个数组，内容为自定义属性名。例：props: [‘msg’]
data和props的区别：1.data是组件内的数据，props是组件的属性，父组件可以通过props中的属性传值给子组件。2.data数据可读可写，props组件可读，不推荐写，如果在组件中修改了props中属性的值，Vue会报错！！

二、代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/vue.js"></script>
</head>
<body>
<!--    3.父组件通过属性绑定的方式给子组件传值-->
    <div id="app">
        <com1 :msg="123"></com1>
    </div>
<script>
    // 父组件通过props给子组件传值！！！ 传值方式为属性绑定v-bind(:)

    // 2.创建一个组件
    Vue.component('com1', {
        data(){
            return {
                name: 'Seven'
            }
        },
        props: ['msg'],     //注意：props是一个数组
        template: '<h1>父组件传过来的值：msg={{msg}}, 子组件自带的数据：name={{name}}</h1>'
    })

    // 1.vm 也算是一个组件，在这里称为父组件
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
</script>
</body>
</html>

三、传值方式2-$refs

1、实质

this.$refs 是用来获取dom元素的，该元素可以用到html元素中，也可以用在组件中。
获取组件的dom元素后，可以获取到组件中的data和methods中的方法，从而可以给data赋值或调用methods中的方法

2、步骤：

给子组件一个ref的属性一个值，该值为将来父组件通过this.$ref来取到子组件
通过this.$ref.值.数据来得到子组件中的数据对象或方法，从而给对象赋值（即父组件给子组件传值）或调用子组件的方法

3、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
<!--        4.创建一个点击事件，给子组件赋值-->
        <button @click="fnClick">给子组件传值</button>
<!--        3.应用子组件，并给子组件ref属性赋值com1-->
        <com1 ref="com1"></com1>
    </div>

<!--    1.创建子组件模板-->
    <template id="tmp1">
        <div>
            <h1>{{msg}}</h1>
        </div>
    </template>
<script>
    // 2.创建子组件
    Vue.component('com1', {
        data() {
            return {
                msg: '子组件值'
            }
        },
        template: '#tmp1'
    })
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            fnClick() { // 5.点击事件中调用的方法，给子组件中的msg数据赋值
                this.$refs.com1.msg = '父组件值'
            }
        }
    })
</script>
</body>
</html>