VUE组件
组件是可复用的 Vue 实例：
比如我门的组件定义了他就是全局的了，就可以在其他的局域内继续使用了 ，我们定义组件可以复用大大提升了我们的方便
组件的设置必须要写在componet内
Vue.componet()
然后你div内的组件接受标签可以自定义但是必须要和componet内的相符合，
<body>
<div id="app">
<alert></alert> <!--这个事用来进行接受你定义的组件的内容，必须和下面你componen内的组件设置名相同-->
</div>
<!-- -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
<!-- Vue.component事定义一个全局的组件-->
Vue.component('alert',{<!-- 这个事定义一个组件 内部事组件的名字和组件的内容 -->
template:`<button v-on:click='ttt'>弹弹弹{{ count }}</button>`,
data:function(){
return {
count:0
}
},
methods:{ <!-- 对你的组件内绑定的方法进行操作 -->
ttt:function(){
return this.count+=1
}
}
})
var app = new Vue({
el:'#app',
})
</script>
</body>
组件是全局的 可能每一个组件有自己单独的属性 所以组件的data需要是函数 data:function(){}
父亲往子传递值需要在子用props接收： 子接收后然后声明这个接收的内容
局部组件：
局部的组件只是在局部内使用不可以成为全局的使用
是定义在局部内的使用 子往父传递消息需要用到$emit('自定义事件')这个来进行你的事件的传递
$emit('子内定义的事件')
<body>
<div id="app">
<p>{{ totalCount }}</p>
<alert v-for="jishi in list" v-bind:name="jishi" v-on:jiekele="add"> <!-- 给父亲泵顶一个事件这个事件是由子中传递出来的 -->
</alert>
</div>
<!-- -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const alertComponent={ // 定义一个组件 然后马上赋值给父亲中的组件名就可以了 这是局部组件的 定义方法
template:`<button v-on:click='ttt'>{{ name }}:{{ count}}</button>`,
data:function(){
return{
count:0
}
},
props:{ // 这个是拿到你父亲往子传递的内容
name:String
},
methods:{
ttt:function(){
this.count += 1;
this.$emit('jiekele') // 对这个事件操作 然后传递给父亲 这个必须要用都$emit()
}
}
}
var app = new Vue({
el:'#app',
data:{
totalCount:0,
list:[
'1号',
'2号',
'3号'
]
},
components:{
alert:alertComponent
},
methods:{
add:function(){
this.totalCount += 1
}
}
})
</script>
</body>
插槽：slot 其实就是一个占位的作用 在你的 定义的组件名中占位置 然后让子组件或者父组件通过占位符slot 进行值的传递
用slot占主位置 然后让你的组件进行传递信息
<body>
<div id="app">
<p>总数：{{ totalCount }}</p>
<alert v-for="jishi in list" v-bind:name="jishi" v-on:jiekele="add">
<template slot="haha"> <!-- 我们在使用子向父传递信息的时候需要先用一个占位符把位置占住这样在子中定义的信息通过占位符才能传递进来 -->
<span>呵呵</span>
<h1>插槽</h1>
</template>
<span slot="heihei"> 嘿嘿！</span>
</alert>
</div>
<!-- -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const alertComponent = {
template:`
<div> // 如果你的 组件中要声明多种的话需要放在div中
<button v-on:click = 'ttt'>{{ name }}:{{ count }}</button>
<slot name='heihei'></slot>
<slot name='haha'></slot>
</div>
`,//slot是对你的组件中的占位进行填充
props:{// 使用props声明 我这个组件需要外边给我传一个字符串格式的name变量
name:String
},
data:function(){
return {
count:0,
}
},
methods:{
ttt:function(){
this.count+= 1; //让你的总数加1
this.$emit('jiekele')// 在vue的组件中通过触发自定义的事件来向外传递信息
}
},
}
// 注册自定义的局部组件
var app = new Vue({
el:'#app',
data:{
totalCount:0,
list:[
'1号jishi',
'2号jishi',
'3号jishi'
]
},
components:{ //对你的自定义的组件进行赋值
alert:alertComponent
},
methods:{
add:function(){
this.totalCount += 1
}
}
})
</script>
</body>
组件还可以用is来进行赋值： 就是is=‘你的组件名’ 来接收你的组件
<body>
<div id="app">
<table>
<tr is=zsq></tr>
</table>
</div>
<!-- -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{},
components:{
zsq:{ //对你上面定义的进行内容设置
template:`<tr>我是一个tr标签</tr>`
}
}
})
</script>
</body>
还能对你的标签进行补充 显示额效果是： 我没有写tbody页自动补全了tbody
.native 是让你的组件内绑定的要是原生事件就需要native不然是不会触发的：
用native来调用你的组件内的原生组件
<body>
<div id="app">
<zsq v-on:click.native="hf"></zsq> <!-- native 绑定v-on 是为了让你的click后面是名字相同的时候 处理的事件都是相同的 -->
<zsqsb v-on:click="hf"></zsqsb>
</div>
<!-- -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
name:'zsq',
age:9000
},
components:{
zsq:{
template:`<button>跑啦</button>`,
},
zsqsb:{
template:`<button v-on:click='jiekele'>跑掉啦</button>`,
methods:{
jiekele:function(){
this.$emit('click')
}
}
},
},
methods:{
hf:function(){
alert(123)
}
}
})
</script>
</body>
1. Vue组件 0. 组件注意事项！！！ data属性必须是一个函数！ 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue({ el: '#app' }) 2. 注册局部组件 var app = new Vue({ el: '#app', components:{ 局部组件名:{ template: `...` } } }) 3. 传值 1. 父组件 --> 子组件 1. 父组件通过 v-bind:变量='值' 2. 子组件需要通过props 声明我需要的变量 2. 子组件 --> 父组件 子组件通过触发自定义事件的方式向外传递信息 1. 子组件： this.$emit('自定义事件') 2. 父组件： v-on:自定义事件='方法名' 3. 组件间传值 1. 补充：Vue实例的生命周期钩子函数(共8个) 1. beforeCreate --> 数据属性声明但没有赋值 2. created --> 数据属性赋值 3. beforeMount --> 页面上的 {{name}} 还没有被渲染 4. mounted --> 页面上的 {{name}} 被替换成真正的内容 ... 2. 基于bus对象实现 4. 插槽（slot） 插槽是占位置的！！！ 插槽多了可以起名字，进行区分！ --> <span slot='heihei'>嘿嘿！</span> <alert>根本不显示</alert> 5. 组件的注意事项： 1. 特殊的组件需要使用is语法声明一下 比如 table、select、ul等内部使用的组件 2. 捕获子组件的原生事件
浙公网安备 33010602011771号