1、slot插槽

slot就是子组件里给DOM留下的坑位，动态的DOM

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript" src="vue.js"></script><div id="app"></div><script type="text/javascript"> var parent = { template: ` <div> 我是父组件 <slot name="haah"></slot> </div> ` } new Vue({ el: '#app', template: ` <parent> <div slot="haah">我是插槽haah</div> <div>我也是插槽但是不会显示因为我没有指定slot名称</div> </parent> `, components: { parent } })</script></body></html>2、ref获取子组件实例

a、识别：在子组件或元素上使用属性ref="xxx"
b、获取：this.$refs.xxx获取元素
$el 获得元素DOM

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript" src="vue.js"></script><div id="app"></div><script type="text/javascript"> var child = { template:` <div>我是子组件 <br> <input type="text" v-model="name" value="name"> </div> `, data() { return { name:'123' } } } var parent = { // 使用子组件 template: ` <div> 我是父组件 <child ref="childs"></child> <button @click="getdata">通过this.$refs操作子组件属性</button> </div> `, // 注册子组件 components: { child }, methods:{ getdata(){ this.$refs.childs.name = '456'; } } } new Vue({ el: '#app', template: ` <div> <parent> </parent> </div> `, components: { parent } })</script></body></html>3、$parent获取父组件实例

直接在子组件中使用this.$parent

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="text/javascript" src="vue.js"></script><div id="app"></div><script type="text/javascript"> var child = { template: ` <div>我是子组件 父组件的ID为：{{id}} <button @click='getID'>点我获得父组件ID</button> <br> </div> `, methods: { getID() { this.id = this.$parent.msg } }, data() { return { id: '' } } } var parent = { // 使用子组件 template: ` <div> 我是父组件 我的ID：{{msg}} <child></child> </div> `, // 注册子组件 components: { child }, data() { return { msg: '123' } } } new Vue({ el: '#app', template: ` <div> <parent> </parent> </div> `, components: { parent } })</script></body></html>