Vue组件使用

初识组件应用

实例化多个vue对象

用new创建多个vue对象并命名，可以通过变量相互访问
例子：对象2修改对象1的name变量

<!-- 第一个根元素 -->
<div id="vue-app-one">这里是：{{name}}</div> 

<!-- 第二个根元素 -->
<div id="vue-app-two">
    <p>这里是：{{name}}</p><br>
    <button @click="changeName">change-one-name</button>
    <!-- 点击后修改vue-app-one的name值-->
</div>



 // 第一个vue对象
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'
        }
    }
})

父向子传值/传引用：prop

静态传值

创建子组件：

var titleComponent = {
    props:["title"],
    template:`<p>{{title}}</p>`
    // 所需要的数据title由父组件提供
}

new Vue({
    el:"#vue-app-one",
    components:{
        "msg": msgComponent,
        "titleComponent":titleComponent
    },
})

在父组件上使用子组件：

<!-- div#vue-app-one为父组件 -->
<div id="vue-app-one">
    <p>这里是vue-app-one</p>
    <mycomponent></mycomponent>
    <mycomponent></mycomponent>
	<!--使用子组件title-component，并传值"我的爱好："给子组件-->
    <title-component title="我的爱好："></title-component>
    <msg></msg>
</div>