vue six day

组件数据交互

父组件向子组件传值：

    <div id="app">
        <meun-item :title="pmsg"></meun-item>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 父组件向子组件传递数据
        // props里定义好接受的形参
        Vue.component("meun-item",{
            props:["title"],
            data:function(){
                return {
                    msg:"我是子组件"
                }
            },
            template:"<div>{{msg}}+------{{title}}</div>"
        })
        var vm =new Vue({
            el: "#app",
            data: {
                pmsg: "我是父组件"
            }
        })
    </script>

props命名规则：

<div id="app">
        <meun-item :ti-tle="pmsg"></meun-item>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // props形参名定义规则：
        // 1.在props里使用驼峰方式，在模板里使用时
        // 2.字符串形式的模板中没有这个限制(就是写在类似于template里的字符串模板没有上条限制，建议还是使用第一条的规则)
        Vue.component("meun-item", {
            props: ["tiTle"],
            template: "<div>{{tiTle}}</div>"
        })
        var vm = new Vue({
            el: "#app",
            data: {
                pmsg: "我是父组件"
            }
        })
    </script>

props可以传递的属性类型

<div id="app">
        <meun-item :pstr="pstr" :pint="12" :pbool="true" :parr="parr" :pobj="pobj"></meun-item>
</div>
<script>
        // props可以传递的属性类型：
        // str int bool arr obj
　　　　 // 不用v-bind绑定属性的话传来的都是字符串

        Vue.component("meun-item", {
            props: ["pstr", "pint", "pbool", "parr", "pobj"],
            template: `<div>
                <div>{{pstr}}</div>
                <div>{{pint}}</div>
                <div>{{pbool}}</div>
                <ul>
                    <li :key="index" v-for="item,index in parr">{{item}}</li>
                </ul>
                <div>
                    <span>{{pobj.name}}</span>
                    <span>{{pobj.age}}</span>
                </div>
            </div>`
        })
        var vm = new Vue({
            el: "#app",
            data: {
                pstr: "hello",
                parr: ['1', '2', '3'],
                pobj: {
                    name: "lisi",
                    age: "11"
                }
            }
        })
    </script>

子组件向父组件传递信息

    <div id="app">
        <div :style="{fontSize: ztsize +'px'}">{{pstr}}</div>
        <meun-item @kdzt="handle"></meun-item>
    </div>
<script>
        // 子组件向父组件传递信息
        // 总结：
        // 传递事件
        // 1.先在子组件模板里自定义事件
        // 2.将该事件绑定到组件标签里 这样子组件点击就可以触发事件
        // 3.触发事件的函数写在父组件里 这样就可以操控父组件的元素
        Vue.component("meun-item", {
            props: ["pstr",],
            template: `<div>
                <button @click="$emit('kdzt')">扩大父组件字体</button>
            </div>`
        })
        var vm = new Vue({
            el: "#app",
            data: {
                pstr: "hello",
                ztsize: 10
            },
            methods: {
                handle: function () {
                    this.ztsize += 5;
                }
            }
        })
    </script>

子组件向父组件传递值

    <div id="app">
        <!-- 子组件向父组件传递值 -->
        <div :style="{fontSize: ztsize +'px'}">{{pstr}}</div>
        <meun-item @kdzt="handle($event)"></meun-item>
    </div>

<script>      
 // ------------------------------------------------------------
        // 子组件像父组件传递参数
        Vue.component("meun-item", {
            props: ["pstr",],
            template: `<div>
                <button @click="$emit('kdzt',5)">扩大父组件字体</button>
            </div>`
        })
        var vm = new Vue({
            el: "#app",
            data: {
                pstr: "hello",
                ztsize: 10
            },
            methods: {
                handle: function (val) {
                    this.ztsize += val;
                }
            }
        })
    </script>

非父子间组件传值

<div id="#app">
        <tom-but></tom-but>
        <jerry-but></jerry-but>
</div>
<script>
        // 非父子间传值
        // 1.成立事件监听中心
        // 2.绑定事件
        // 3.触发事件
        // 总结：
        // 先成立事件中心，接着hub.$on绑定事件，然后hub.$emit触发事件

        // 成立事件监听中间
        var hub = new Vue()
        // 给组件绑定事件
        Vue.component("tom-but", {
            data: function () {
                return {
                    num: 0
                }
            },
            template: `<div>
                <span>tom</span><br>
                <span>{{num}}</span><br>
                <button @click=handle>点击</button>
            </div>`,
            methods: {
                handle: function () {
                    // 触发事件
                    // 在tom里触发jerry事件
                    hub.$emit("jerry-event", 1)
                }
            },
            mounted: function () {
                // 箭头函数是es6新语法 应该相当于匿名函数
                // 绑定事件
                hub.$on("tom-event", (val) => {
                    this.num += val
                })
            }
        })

        Vue.component("jerry-but", {
            data: function () {
                return {
                    num: 0
                }
            },
            template: `<div>
                <span>jerry</span><br>
                <span>{{num}}</span><br>
                <button @click=handle>点击</button>
            </div>`,
            methods: {
                handle: function () {
                    // 触发事件
                    // 在jerry里触发tom事件
                    hub.$emit("tom-event", 2)
                }
            },
            mounted: function () {
                // 箭头函数是es6新语法 应该相当于匿名函数
                // 绑定事件
                hub.$on("jerry-event", (val) => {
                    this.num += val
                })
            }
        })

        var vm = new Vue({
            el: "#app",
        })
    </script>