vue操作已有的组件

可以复用

<div id="app">
			<!-- vue 操作dom -->
			<h3 ref="myh" @click="play">标题字</h3>
		</div>
		<script src="vue.js"></script>
		<script>
		let vm =new Vue({
				el:'#app',
				methods:{
					play(){
						this.$refs.myh.innerHTML ='happy'
					}
				}
			})
			// Vue 对象的实例化对象的属性和方法 $
			console.log(vm);
			console.log(vm.$el);
			console.log(vm.$refs.myh.innerHTML);
			vm.$refs.myh.innerHTML ='good';
		</script>

全局组件

    <div id="app">
    			<son></son>
    			<son></son>
    		</div>
    		<script src="vue.js"></script>
    		<script>
    			//全局组件 component
    			Vue.component('son',{
    				template:'<h3>全局组件</h3>'
    			})
    			new Vue({
    				el:'#app',
    				data:{
    					
    				}
    			})
    		</script>

全局组件

<div id="app">
			<!-- 3 用子 -->
			<child1></child1>
			<child1></child1>
			<child2></child2>
			<child2></child2>
		</div>
		<script src="vue.js"></script>
		<script>
			// 1. 生子(将来子组件页面)
			let child1 = {
				template:'<div>我是子组件1</div>'
			}
			let child2 ={
				data(){ //函数
					return {
						msg:'hello'
					}
				},
				methods:{
					run(){
						alert('能跑'+this.msg);
					} 
				},
				template:'<div @click="run">我是子组件2{{msg}}</div>'
			}
			new Vue({
				el:'#app',
				data:{
					
				},
				components:{
					child1:child1, // 2.挂子
					child2
				}
			})
		</script>

局部组件 生子 挂子 用子

    <div id="app">
    			<!-- 3 用子 -->
    			<child1></child1>
    			<child1></child1>
    			<child2></child2>
    			<child2></child2>
    		</div>
    		<script src="vue.js"></script>
    		<script>
    			// 1. 生子(将来子组件页面)
    			let child1 = {
    				template:'<div>我是子组件1</div>'
    			}
    			let child2 ={
    				data(){ //函数
    					return {
    						msg:'hello'
    					}
    				},
    				methods:{
    					run(){
    						alert('能跑'+this.msg);
    					} 
    				},
    				template:'<div @click="run">我是子组件2{{msg}}</div>'
    			}
    			new Vue({
    				el:'#app',
    				data:{
    					
    				},
    				components:{
    					child1:child1, // 2.挂子
    					child2
    				}
    			})
    		</script>