组件介绍

根组件

• 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)

• 根组渲染的内容默认就是挂在点里面所有的标签，如果写了template定制了模板，template的模板会替换掉挂在点里面的所有标签，并且template里面一定是一个大div包裹着所需要的其他标签。

<div id="app">
    <h1>{{ msg }}</h1>
</div>
<script type="text/javascript">
	// 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
	// 每个组件组件均拥有模板,template但是真实场景下一般不写模板
	var app = new Vue({
		// 根组件的模板就是挂载点
		el: "#app",
		data : {
			msg: "根组件"
		},
		// 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量
		// 显式书写模块,就会替换挂载点,但根组件必须拥有挂载点
		template: "<div>显式模板</div>"//虚拟dom会替换挂在点的真实dom
	})

</script>

• 定制template的时候方多行标签

  template: `<h1 id="app" :style="{color: c}" @click="action">
{{ msg }}
</h1>
`,

• 利用js完成两个根组件之间互相通讯，不推荐

let app = new Vue({
        el: '#app',
        data: {
            msg: 'app的msg',
            c: 'red'
        },   
});
let main = new Vue({
        el: '#main',
        data: {
            msg: 'main的msg'
        }
    });
/ 知识点：利用原生js完成两个组件的交互
    // 获取组件的数据
    // console.log(app.msg);
    // 修改组件的数据
    // app.msg = '12345';
    main.msg = app.msg;