study
/
vue
/
22th.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子component取得父component的值</title>
    <script src="vue.js"></script>
    <script>
    /*****
     * 子组件获取父组件的值
     * 父 自定义属性 :p1='参数' :p2='...'
     * 子 props['p1']
     *
     * 父组件获取子父级的值
     * 子   发射 $emit('c1',参数1,参数2)
     * 父   自定义属性接收 v-on:c1=""
     * */
    </script>
</head>
<script>
window.onload = function(){

    //方式1，先创建组件构造器，再创建组件
    var myComponent = Vue.extend({
        template:'<h2>hello</h2>'
    });
    Vue.component('hello',myComponent);


    //方式2
    Vue.component('my-world',{
        template:'<h1>my world {{myname}} </h1>',
        data:function(){
            return{
                msg:'123'
            }
        },

        //子组件拿到父级组件的值
        //处理子父级数据处理,可拿到父级组件的值
        //这里的myname取的是 v-bind:myname 的值
        props:['myname']
    });

     new Vue({
         el:'#my',
         data:{
             msg:'hello world',
             name:'hanley-tang',
             arr:[1,2,3,4]

         },
         methods:{},
         filters:{},
         //方式3 局部组件
         components:{
            'my-address':{
                template:'<h4>局部组件 my-address</h4>'
            },
            //组件引用模板
            'my-address2':{
                template:'#myAddress',
                //组件中带数据,data:function = data{}
                data:function(){
                    return{
                        title:'标题',
                        lists:[1,2,3,4,5]
                    }
                }
            }
         }
     });
 }
</script>

<!-- 模板，必须有一个根节点 -->
<template id="myAddress">
    <div>
        <!-- 这里的title 取 对应组件的值 -->
        <p>{{title}}</p>
        <ul>
            <li v-for="v in lists">{{v}}</li>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
    </div>
</template>


<body>
<div id="my">
    <hello></hello>

    <!--子组件获取父组件的值，这里是桥梁,-->
    <my-world :myname="name"></my-world>

    <my-address></my-address>
    <my-address2></my-address2>
</div>


    </div>
</body>
</html>