vue中组件的嵌套(1)

时间 2019-11-10

标签 vue 组件嵌套繁體版

原文原文链接

　　　1.组件的嵌套javascript

　　　　组件嵌套:把组件与组件嵌套在一块儿,html

　　　　在父组件下的模板中，以标签的形式调用子组件。vue

　　2 . 组件通讯java

　　　　组件通讯 : 就是把同一个信息能够在不一样的组件中共用app

　　　　方式一 : 组件父传子用 Props 父组件将信息传给子组件,从而子组件得到父组件的信息　　　函数

　　　　　　父组件和子组件，之间靠子组件标签取得关联，在子组件标签上全部的属性构成的集合在子组件的props属性能够接受到。this

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组件-父传子</title>
        <script type="text/javascript" src="js/vue.js">    </script>
    </head>
    <body>
        <div id="app">
            <!-- 调用组件标签 -->
            <heads></heads>
        </div>
    </body>
</html>
<template id="temp">
     <!-- 建立模板 -->
     <div> <!-- 定义模板只能有一个顶层标签 -->
         <h3>这是个人第一个模板</h3>
         <p>{{msg}}</p> <!-- 组件的数据放在模板里  -->
         <son :tab = "msg"></son> <!-- 组件标签 :tab 绑定动态属性 msg是数据 -->
     </div>
</template>
<script type="text/template" id="temp1">
    <!-- 子组件的模板 -->
    <div>
        <h2>good moring {{tab}}</h2>
        <p>{{msg}} {{tab}}</p>
    </div>
</script>
<script type="text/javascript">
    //  定义子组件
    let Son = {
        template : "#temp1",
        // 每一个组件都有一个props属性,这个属性是该组件的组件标签身上全部属性构成的集合
        props : ["tab"], 
        data : function (){
            return {
                msg : "这是个人子组件",
            }
        },
        mounted(){
            this.tab = this.$props.tab;
        }
    }
    //  定义组件
    let Heads = {  // 组件名必须大写,不能使用h5标签
        template : "#temp", // 模板和组件经过id相关联
        data : function (){ // 组件的data是一个函数
            return{
                msg : "hello Miss wang!",
            }
        },
        components : {
            son : Son, // 注册子组件
        }
    }
    //  app是最大的根组件
    let app = new Vue({
        el : "#app",
        data : {},
        components : {
            heads : Heads, // 注册组件
        }
    });
</script>

　　　　方式二 : 组件父取到子的信息(即子传父) spa

　　　　　　　　　　refs 是组件模板下，全部子组件标签构成的集合。code

　　　　　　1. 在子组件的标签上添加 ref 属性component

　　　　　 2.在父组件下使用this.$refs 就能够看到子组件标签的全部信息

　　　　方式三 : 自定义事件--子传父

　　　　　　人为触发的事件,建立的方法是this.$emit

　　　　　　　　1. 在子组件的模板中添加事件名与事件方法(注意事件名与事件方法),在对应的组件模板中用$emit定义事件

　　　　　　　　　　$emit定义事件

　　　　　　　　　　2. 在子组件标签下用v-on 或 @ 去接受自定义的事件

　　　　　　　　　　3.写事件方法

　　　　　　实例 : 自定义事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自定义组件-子传父</title>
        <script type="text/javascript" src="js/vue.js">    </script>
    </head>
    <body>
        <div id="app">
            <!-- 调用组件标签 -->
            <heads></heads>
        </div>
    </body>
</html>
<template id="temp">
     <!-- 建立模板 -->
     <div> <!-- 定义模板只能有一个顶层标签 -->
         <h3>这是个人第一个模板</h3>
         <p>{{msg}}</p> <!-- 组件的数据放在模板里  -->
         <son @switch = "dd"></son> <!-- 接受事件 -->
     </div>
</template>
<script type="text/template" id="temp1">
    <!-- 子组件的模板 -->
    <div>
        <h2>good moring</h2>
        <p>{{msg}}</p>
        <button @click = "ff">点击提交</button>
    </div>
</script>
<script type="text/javascript">
    //  定义子组件
    let Son = {
        template : "#temp1",
        data : function (){
            return {
                msg : "这是个人子组件",
            }
        },
        methods : {
            ff : function(){
                // 定义一个事件 $emit("事件名",数据)
                this.$emit("switch",this.msg);
            }
        },
    }
    //  定义组件
    let Heads = {  // 组件名必须大写,不能使用h5标签
        template : "#temp", // 模板和组件经过id相关联
        data : function (){ // 组件的data是一个函数
            return{
                msg : "hello Miss wang!",
            }
        },
        methods : {
            dd : function(res){
                this.msg = res;
            }
        },
        components : {
            son : Son, // 注册子组件
        }
    }
    //  app是最大的根组件
    let app = new Vue({
        el : "#app",
        data : {
            
        },
        components : {
            heads : Heads, // 注册组件
        }
    });
</script>