组件

入门

Document

<!-- 第二个根元素 -->
<div id="vue-app-two">
    <p>这里是：{{name}}</p><br>
    <button @click="changeName">change-one-name</button>
    <!-- 点击后修改vue-app-one的name值-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var one = new Vue({
        el: "#vue-app-one",
        data: {
            "name": "ccy1"
        }
    })

    // 第二个vue对象
    var two = new Vue({
        el: "#vue-app-two",
        data: {
            "name": "ccy2"
        },
        methods: {
            // 修改vue-app-one的name为'ccy333'
            changeName: function () {
                one.name = 'ccy333'
            }
        }
    })
</script>

局部组件

Document

全局组件

Document

<!-- 第二个根元素 -->
<div id="vue-app-two">
    <my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    // 自定义的全局组件my-component
    // template中只有一个根元素p标签，里面包含一个button按钮
    Vue.component('my-component', {
        template: `<p>
    我的名字是：{{name}}
    <button @click='changeName()'>btn</button>
    </p>`,
        data() {
            return {
                name: 'ccy'
            }
        },
        methods: {
            changeName: function () {
                this.name = '安之'
            }
        }
    })
    // vue对象1
    new Vue({
        el: "#vue-app-one",
    })
    // vue对象2
    new Vue({
        el: "#vue-app-two",
    })
</script>

父子传值

Document