全局组件
<div class="app">
<!-- 组件名是大写 在浏览器编译的时候会转成小写，导致找不到想应的组件，可以全变成小写，中间加-来解决 -->
<child1></child1>
<!-- 所有的组件都需要使用一个div来包裹 -->
<div><child-a/></div>
<div><child-b/></div>
<!-- 模板的第二种写法，使用template加id -->
<template id="childB">
<div>
<h1>我是程序员</h1>
<h1>我是程序员</h1>
</div>
</template>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
/* 模板的第一种写法 */
Vue.component('child1',{
template:`<h1>我是child1</h1>`
})
Vue.component('childA',{
template:`<h1>我是childA</h1>`
})
Vue.component('childB',{
template:'#childB'
})
new Vue({
el:'.app'
})
</script>
局部组件
<div class="app">
<div>
<child1/>
</div>
</div>
new Vue({
el: '.app',
components:{
child1:{
template:`<h1>我爱学习</h1>`,
created() {
console.log('son');
}
}
}
})
父组件给子组件传值
<div class="app">
<div>
<child :carr="arr" />
</div>
</div>
<template id="child">
<div>
<h1 v-for="(item,index) in carr" :key="index">姓名：{{item.name}}，年龄：{{item.age}}</h1>
</div>
</template>
<script>
new Vue({
el: '.app',
data: {
arr: [{
name: 'zhangsan',
age: 40
}, {
name: 'lisi',
age: 30
}, {
name:'wangwu',
age: 20
}]
},
components: {
child: {
template: '#child',
/* 子组件用props来接收carr的值 简写的方式 */
/* props: ['carr'] */
props: {
/* 全面的写法 有默认值 */
carr: {
type: Array,
dafault: [{
name: 'zhangsan',
age: 40
}]
}
}
}
})
子组件传给父组件
<template id="child">
<div>
第一步 给子组件 设置点击函数fn
<h1 v-for="(item,index) in cmsg" :key="index" @click="fn(index)" :class="{line:item.flag}">{{item.content}}</h1>
</div>
</template>
第二步 给子组件设置函数this.$emit('change' ,i) 触发父组件函数
components: {
child: {
template: '#child',
props: {
carr: {
type: Array,
dafault: [{
name: 'zhangsan',
age: 40
}]
}
},
methods: {
change(i){
this.$emit('change',i)
}
},
}
第三步 给父组件设置@change，要和子组件上传的函数参数相同
<child :carr="arr" @change="del" />
第四步 在父组件methods里设置参数直接改变父组件的值
new Vue({
el: '.app',
data: {
arr: [{
name: 'zhangsan',
age: 40
}, {
name: 'lisi',
age: 30
}, {
name:'wangwu',
age: 20
}]
},
methods:{
del(i){
this.arr.splice(i,1)
}
})
Vue添加属性
/* vue2的缺陷 给对象添加属性，但不会刷新显示 */
/* $.set()的三个参数 第一个参数是目标对象
第二个参数是 目标参数的索引
第三个参数是 具体要修改的内容 */
/* 针对对象 */
/* $.set(this.msg,content，'XXXX') */
/* 针对数组 */
/* $.set(this.msg,i,{content:this.msg[i].content,flag:true}) */
