【Vue】之组件基础和交互

1. 响应按钮点击，全局注册组件

<div id="app">
        <button @click="count+=1"> 点击{{count}}</button>
        <my-count></my-count>
    </div>

    <script src="js/vue.js"></script>

    <script>
        Vue.component("my-count",{
            template:`<div>
                    <p>Hello world</p>
                </div>`
        })
        new Vue({
            el:"#app",
            data:{
                count:0
            }
        })
    </script>

2. 局部注册组件

<div id="app">
        <button @click="count += 1 ">{{count}}</button>
        <my-count></my-count>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                count:0
            },
            components:{
                "my-count":{
                    template:`<div>
                            <p>Hello World~!</p>
                            <p>Hello World~!</p>
                        </div>`
                }
            }
        })
    </script>

3. 局部创建组件，同一组件的值不会相互影响；传参方式：通过props传值给局部组件，改变参数值：components内部需声明data函数，才能使生效。

<div id="app">
        <button @click="counter += 1" >Btn{{counter}}</button>
        <my-count head="猪头" color="白色"></my-count>
        <my-count head="人头" color="黑色"></my-count>
    </div>
    <template id="my-count">
        <div>
            <p>{{head}} => {{color}}</p>
            <button @click="counter += 1" >Btn{{counter}}</button>
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                counter:0
            },
            components:{
                "my-count":{
                    template:"#my-count",
                    props:["head","color"],
                    data:function(){
                        return {counter:10}
                    }
                }
            }
        })
    </script>

4. 父组件通过props传值给子组件并改变值（也就是把data里面的数据，在components里面的props传给子组件，通过事件调用methods方法触发子组件值的改变）

<div id="app">
        <p>父级标签：{{message}}</p>
        <my-children :txt="message"></my-children>
    </div>
    <template id="children">
        <div>
            <p>我是组件里的p标签</p>
            <input type="button" value="按钮" @click="change">
            <strong>{{txt}}</strong>
        </div>
    </template>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                message:"我是父组件信息"
            },
            components:{
                "my-children":{
                    template:"#children",
                    props:["txt"],
                    methods:{
                        change:function(){
                            this.txt = "子对象里面的内容被改变了"
                        }
                    }
                }
            }
        })
    </script>

在components-my-children里面定义一个方法，可以使txt变换为message

mounted(){
                this.message = this.txt;
            },

5.组件之间传值通过$emit和$on

<div id="app">
        <com-a></com-a>
        <com-b></com-b>
        <com-c></com-c>
    </div>
    <template id="child">

    </template>
    <script src="js/vue.js"></script>
    <script>
        var Event = new Vue();

        var A = {
            template:`<div>
                    <span>我是A组件对象</span>=>
                    <input type="button" value="把A组件传递到C组件" @click="send"/>
                </div>`,
            methods:{
                send(){
                    Event.$emit("a-msg",this.a);
                }
            },
            data(){
                return {
                    a:"我是A数据"
                }
            }
        }
        var B = {
            template:`<div>
                    <span>我是B组件对象</span>=>
                    <input type="button" value="把B组件传递到C组件" @click="send"/>
                </div>`,
            methods:{
                send(){
                    Event.$emit("b-msg",this.b);
                }
            },
            data(){
                return {
                    b:"我是B数据"
                }
            }
        }
        var C = {
            template:`<div>
                    <span>我是C组件对象======</span>=>
                    <p>接收过来的A的数据为：{{a}}</p>
                    <p>接收过来的B的数据为：{{b}}</p> 
                    <input type="button" value="把A组件传递到C组件" @click="send"/>  
                </div>`,
            mounted:function(){
                // var _this = this;
                Event.$on("a-msg", function(a) {
                    this.a = a;
                }.bind(this));
                Event.$on("b-msg", function(b){
                    this.b = b;
                }.bind(this));
            },
            methods:{
                send(){
                    Event.$emit("c-msg",this.c);
                }
            },
            data(){
                return {
                    a:"",
                    b:"",
                    c:"我是C数据"
                }
            }
        }

        new Vue({
            el:"#app",
            data:{
                str:"我是父组件对象"
            },
            components:{
                "com-a":A,
                "com-b":B,
                "com-c":C
            }
        })
    </script>

6.选项卡切换效果，显示不同组件

<div id="app">
        <input type="button" @click="show='one'" value="One组件">
        <input type="button" @click="show='two'" value="Two组件">
        <component :is="show"></component>
    </div>

    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                show:"two"
            },
            components:{
                'one':{
                    template:"<h1>我是One组件</h1>"
                },
                "two":{
                    template:"<h1>我是Two组件</h1>"
                }
            }
        })
    </script>

扫描二维码关注公众号，回复： 2447353 查看本文章