<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
        </ul>
        <div>{{pmsg}}</div>

        <menu-item :pstr='pstr' :number='1' :bool='true' :parr='parr' :pobj='pobj' @enlarge-text='handle'></menu-item>

        <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
    </div>
</body>
<script type="text/javascript">
    Vue.component('menu-item', {
        props: ['pstr', 'number', 'bool', 'parr', 'pobj'],
        template: `
            <div>
                <div>
                    <div>1.{{typeof pstr}}</div>
                    <div>2.{{typeof number}}</div>
                    <div>3.{{typeof bool}}</div>
                </div>
            
                <div>
                    <div>1.{{pstr}}</div>
                    <div>2.{{number}}</div>
                    <div>3.{{bool}}</div>
                </div>

                <div>
                    <ul>
                        <li :key='index' v-for='(item,index) in parr' >{{item}}</li>
                    </ul>
                </div>

                <div>
                    {{pobj.name}}  =======================  {{pobj.age}}
                </div>

                <div>
                    <button @click='parr.push("hhh")'>点击添加数组</button>
                    <button @click='$emit("enlarge-text")'>扩大父组件中字体大小</button>
                </div>
            </div>
            
            
        `
    })
    var vm = new Vue({
        el: '#app',
        data: {
            pmsg: '父组件中的内容',
            pstr: "ahsdkjah",
            parr: ['one', 'two', 'three'],
            pobj: {
                name: "lisi",
                age: 20
            },
            fontSize: 10

        },
        methods: {
            handle: function() {
                this.fontSize += 5;
            }
        }
    })
</script>

</html>

<!-- 
    template :里面的内容只能填充默认的第一个div
    props 的属性
    String
    Number
    Boolean
    Array
    Object


    子主键向父主键传值 是单向数据流 --- 不允许子组件向父主键传值  其实 是可以传的   不太 容易控制

-->