第25章 0119-组件的知识，学习心得，笔记（Vue，组件传参）

今天所学心得、笔记

1、父组件，向子组件传参

<div id="app">
    <h2>{{pmsg}}</h2>
    <title-item title="父组件静态传值"></title-item>
    <title-item :title="ptitle" content="示例传多个值，这个采用静态传值"></title-item>
</div>
<script src="vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data() {
            return {
                pmsg: "这是来自父组件的数据",
                ptitle: "父组件，动态传的值...",
            }
        },
        components: {
            titleItem: {
                props: ["title","content"],
                data() {
                    return {
                        smsg: "子组件数据...",
                    };
                },
                template:`<h3>{{smsg +"---"+ title +"---"+ content}}</h3>`,
            }
        }
    })
</script>

---

2、子组件，向父组件传参

<div id="app">
    <h2 :style="{fontSize: fontSize + 'px'}">{{pmsg}}</h2>
    <title-item @enlarge-text="handle($event)"></title-item>
</div>
<script src="vue.js"></script>
<script>
    const vm = new Vue({
        el: "#app",
        data() {
            return {
                pmsg: "这是来自父组件的数据",
                fontSize: 10,
            }
        },
        methods: {
            handle(ev) {
                this.fontSize += ev;
            }
        },
        components: {
            titleItem: {
                template:`<button @click="$emit('enlarge-text', 5)">放大父组件字体</button>`,
            }
        }
    })
</script>

---

3、父子组件，双向传参

<div id="app">
    <h3>{{titelText}}</h3>
    <h3>点击了 {{count}} 次</h3>
    <br>
    <btn-inc :count="count" @count-add="handle($event)"></btn-inc>
</div>
<script src="vue.js"></script>
<script>
const vm = new Vue({
    el: '#app',
    data() {
        return {
            titelText: "组件之间，双向传值......",
            count: 0,
        }
    },
    methods: {
      handle(event) {
         this.count += event;
      }
    },
    components: {
        btnInc: {
            props: ["count"],
            template:`
                <button @click="$emit('count-add', 10)">点击了 {{count}} 次</button>
            `,
        }
    }
})
</script>