Vue 实例在创建时会有一系列属性和方法被添加到它的实例上，这些属性和方法使得开发者能够操作Vue组件的各个方面。下面是一些常见的Vue实例属性：
$data：Vue 实例的数据对象。Vue 将会递归将数据的属性转换为 getter/setter，从而让数据变化时视图更新。
$props：当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。
$el：Vue 实例使用的根 DOM 元素。
$options：用于当前 Vue 实例的初始化选项。这需要在选项中包含自定义属性时来访问。
$parent：父实例，如果当前实例有的话。
$root：当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。
$children：当前实例的直接子组件实例数组。
**slots∗∗：用来访问被插槽分发的内容。每个具名插槽有其相应的属性（例如：‘v−slot:foo‘对应的插槽为‘this.slots.foo`）。
**scopedSlots∗∗：2.6.0+新增，用来访问作用域插槽。对于带有‘v−slot:‘和模板的‘<slot>‘元素，它们的渲染的DOM将会被当作函数，
并使得‘this.scopedSlots` 上相应的函数可用。
$refs：一个对象，持有注册过 ref 特性的所有 DOM 元素和子组件实例。
$isServer：当前 Vue 实例是否运行在服务器。
$attrs：包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。
**listeners∗∗：2.4.0+已废弃，使用‘attrs` 替代。包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。
$watch：实例方法用于观察 Vue 实例上的数据变动。
$once：实例方法用于监听只触发一次的事件。
$off：实例方法用于移除自定义事件监听器。
$emit：实例方法用于触发当前实例上的事件。
$nextTick：实例方法用于在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
$forceUpdate：迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
**mount∗∗：如果Vue实例在实例化时没有收到el选项，则它处于“未挂载”状态，
没有关联的DOM元素。可以使用vm.mount() 手动地挂载一个未挂载的实例。
$destroy：完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器，移除它的所有子实例，
并且调用它所有的 beforeDestroy/destroyed 钩子。
这些属性和方法提供了Vue实例的强大功能，使得开发者能够灵活地操作Vue组件和DOM。然而，在实际开发中，应当谨慎使用某些属性（
如 $children 和 $parent），因为它们可能会破坏组件的封装性和可重用性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="../js/vue.js"></script>
<style>
.box {
width: 500px;
border: 1px solid red;
float: left;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<button @click="handle">点击</button>
<input type="text" v-model="msg" />
<input type="text" ref="input" value="11" id="test" />
<child></child>
<slottest>
<span>你好啊</span>
</slottest>
<slotname>
<span slot="test">很好</span>
</slotname>
<slotscope :books="books">
<template slot-scope="scope">
<span >{{scope.item.name}}</span>
</template>
</slotscope>
</div>
</div>
<script>
let child = {
template: `<div>
<input type="text" v-model="msg">
<input type="text" v-model="this.$parent.msg">
<button @click="childhanlde">子点击</button>
<button @click="testref">点击ref</button>
<child-child data="吼吼"></child-child>
</div>
`,
data() {
return {
msg: this.$parent.msg,
};
},
methods: {
childhanlde: function () {
//alert(this.$parent.msg)
this.$parent.parentHanle();
},
testref: function () {
this.$parent.$refs.input.value = "2223";
},
},
components: {},
};
// let childchild = {
// };
Vue.component("child-child", {
template: `
<div>
<button v-bind="$attrs" @click="testhanlde">子的子实例</button>
</div>`,
data() {
return {};
},
methods: {
testhanlde: function () {
// this.$root.testref()
// console.log(this.$root)
this.$root.handle();
alert("testhanlde");
},
},
});
let slottest = {
template: `<div>
<slot></slot>
</div>`,
data() {
return {};
},
};
let slotname={
template: `<div>
<slot name="test"></slot>
</div>`,
data() {
return {};
},
}
let slotscope={
props:["books"],
template:`
<div>
<ul >
<li v-for="(book,index) in books" :key="index">
<slot :item="book">
</slot>
</li>
</ul>
</div>`
}
var vm = new Vue({
el: "#app",
data: {
msg: "你好",
books:[{name:"三国"}]
},
mounted() {
console.log(this.$refs.input);
},
computed: {
parentHanle: function () {
alert("我是parentHanle");
},
},
methods: {
handle: function () {
// console.log(this);
alert("root handle");
},
},
components: {
child: child,
// "child-child": childchild,
slottest:slottest,
slotname:slotname,
slotscope:slotscope
},
});
</script>
</body>
</html>
浙公网安备 33010602011771号