所有的vue组件都是vue实例吗？
很高兴回答你的问题:
vue组件和实例的关系Vue是由一个个实例构建而成的，一个组件就是一个Vue的实例，每个组件内部都可以写属性，因此每一个组件都是一个Vue的实例。每一个实例都有自己的template模板，如果没有，根节点就会去挂载点下面找，找到root会把root下面的所有DOM标签当做这个实例的模板使用。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组件与实例的关系</title>
<!-- 在head里面引入，避免闪屏问题 -->
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<!-- v-model双向数据绑定 -->
<input v-model="inputValue"/>
<!-- 绑定点击事件 -->
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!-- 使用组件来实现，同时绑定属性：content="item" 传参item用以达到动态展示效果 -->
<todo-item
v-for="(item, index) of list"
:key="index"
:content="item"
></todo-item>
</ul>
</div>
<script>
// 定义全局组件
Vue.component("todo-item",{
// 传参后不能直接使用，必须接收一下才可以使用
props:['content'],
// 每一个组件都是一个实例，可以添加事件和属性
template: '<li @click="handleClick">{{content}}<li>',
methods:{
handleClick: function() {
alert("clicked")
}
}
})
new Vue({
el:"#root",
data:{
inputValue:'',
list:[],
},
// 添加事件
methods:{
handleSubmit: function(){
// 将inputValue push到数组中
this.list.push(this.inputValue),
// 清空输入框
this.inputValue=''
}
}
})
</script>
</body>
</html>
区别vue实例会比vue组件多出el和router属性，而vue组件的data会被要求必须是函数，防止出现同种组件多实例共享同一个data的事情。官网介绍不过现在，你只需要明白所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。
从上面可以看出， vue 组件本身是一个 vue 实例，同时任何 vue 实例都可以注册为 vue 组件。
你只是把一个 vue 实例注册成了另一个 vue 实例的组件而已。
就像对象的属性也可以是对象一样，迭代关系。
版权说明：Copyright © 广州京杭网络科技有限公司 2005-2025 版权所有 粤ICP备16019765号
广州京杭网络科技有限公司 版权所有
免费热线：400-683-0016
扫二维码关注公众号
当前位置：