不要着急，不要着急，

休息，休息一会。

子组件调用父组件的数据及方法 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>

<body>
    <div id="app">
        <com1 v-bind:parenting="parentDate"></com1>
        <!-- 这里想用调用父组件中的数据，必须为父组件的数据绑定一个名称，并且该名称在子组件中利用props属性进行定义 -->
        <com2 @fun="show"></com2>
        <!-- 这里同理，为父组件的方法绑定一个别称 -->
    </div>
    <template id="temp2">
        <div @click="myclick">
            <h3>这是子组件2</h3>
        </div>
    </template>
</body>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
    let com2 = {
        template:'#temp2',
        methods:{
            myclick(){
                //此时利用emit方法来触发父组件传过来的方法
                this.$emit('fun');//子组件也可以通过这个方法进行传参操作
            }
        }
    }
    let vm = new Vue({
        el: "#app",
        data: {
            parentDate: "我是父组件的数据" //子组件不能直接调用父组件中的数据
        },
        //定义父组件的方法
        methods:{
            show(){
                alert('成功调用了父组件的方法');
            }
        },

        components: {

            com1: {
                data() {//子组件内数据都是可读可写的
                    return {
                        msg: "hello"
                    }
                },
                //从父组件获取的数据为只读，不要去修改，。。即使能修改
                template: "<h3>{{msg}}这是子组件-----{{ parenting }}</h3>", //绑定并声明完成后即可调用，注意此时的名称为定义的名称
                props: ['parenting'] //绑定数据名称的声明
            },

            com2:com2
        }
    });
</script>

</html>

　　效果图：
1

posted @ 2019-10-24 21:25  angle-xiu  阅读(7519)  评论(0)  编辑  收藏  举报
Live2D