master

分支 (1)

管理

管理

master

vuestudy
/
comments.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
    <component v-bind:is="currentView">
    </component>

    <my-component>
        <!-- 通过name可以绑定到对应的dom元素上-->
        <p slot="first">hellow</p>
        <p slot="second">{{name}}</p>
    </my-component>
    <test-component message="hello"></test-component>
    <!--动态绑定父类的属性 通过props-->
    <test-component v-bind:message="name"></test-component>

    <table>
        <tr is="test-component"></tr>
    </table>
</div>
<script>
    //全局注册
    Vue.component('my-component', {
        "template":"<h1><slot name='first'></slot>this is h1<slot name='second'></slot><a href=''>dd</a></h1>",
        // 选项
    });
    let vm = new Vue({
        el:"#app",
        data:{
          "name":"zhang",
            currentView:"test-component"
        },

        //局部注册
        components:{
            "test-component":{
                //绑定事件
                template:"<button v-on:click='test'>{{num}}{{message}}</button>",
                // 组件的data必须是函数 返回值必须是object
                data:function(){
                    return {num:1};
                },
                props: ['message'],
                methods:{
                    test:function(){
                        return this.num++;
                    }
                }
            }
        },
        methods:{
            //通过自定义事件将数据回传给子类。
            test:function () {
                return this.num++;
            }
        }
    });
</script>

<!--
    组件通信


-->
</body>
</html>