组件
'''
1.根组件:new Vue()创建的组件,一般不明确自身的模版,模版就采用挂载点
2.局部组件:local-component={}
3.全局组件:Vue.component({})
'''
'''
1.一个组件就是一个vue实例
2.组件具有自身的template
3.组件的模版只能有一个根标签
4.子组件的data具有作用域,以达到组件的复用,每个组件的数据独有
'''
变量声明的关键字
'''
没有关键字:全局作用域
var:没有块级,有局部作用域
let:有块级,有局部作用域
const:有块级,有局部作用域,是常量
'''
局部组件
第三步
<div id="app">
<!--html代码不区分大小写,该名字使用子组件是不合法的命名-->
<!--<localTag></localTag>-->
<!--<local></local>-->
<!--组件的复用-->
<local-tag></local-tag>
<local-tag></local-tag>
</div>
<script>
第一步
var localTag = {
template: '<div class="local" style="color: orange" @click="btnAction">{{ name }}组件</div>',
// 子组件的数据与方法由子组件自身提供
data: function () {
return {
name: '局部'
}
},
methods: {
btnAction: function () {
alert('你丫点我了')
}
}
};
第二步
new Vue({
el: "#app",
components: {
// local: localTag
// 'local-tag':localTag
// localTag: localTag,
// 1.js的驼峰命名(localTag)对应的是html的连接命名(local-tag)
// 2.key与value的变量名一致,可以简写
localTag
}
});
</script>
全局组件
<div id="app">
<global-tag></global-tag>
<global-tag></global-tag>
</div>
<script>
Vue.component('global-tag', {
template: '<div @click="btnClick">{{ name }}组件被点了{{ n }}下</div>',
// 组件被复用一次,就会产生一个新的局部作用域,使用一套数据
data: function(){
return {
n: 0,
name: "全局"
}
},
methods: {
btnClick: function () {
this.n += 1
}
}
});
new Vue({
el: "#app"
})
</script>
父组件传递数据给子组件
通过绑定属性的方式进行数据传递
<div id="app">
<global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag>
</div>
<script type="text/javascript">
Vue.component('global-tag', {
props:['sup_data1', 'supdata2'],
template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>'
})
new Vue({
el: '#app',
data: {
sup_data1: '数据1',
sup_data2: '数据2'
}
})
</script>
子组件传递数据给父组件
通过发送事件请求的方式进行数据传递
<div id="app">
<global-tag @send_action='receiveAction'></global-tag>
</div>
<script type="text/javascript">
Vue.component('global-tag', {
data () {
return {
sub_data1: "数据1",
sub_data2: '数据2'
}
},
template: '<div @click="clickAction">发生</div>',
methods: {
clickAction () {
this.$emit('send_action', this.sub_data1, this.sub_data2)
}
}
})
new Vue({
el: '#app',
methods: {
receiveAction (v1, v2) {
console.log(v1, v2)
}
}
})
</script>
父子组件实现todoList
<div id="app">
<div>
<input type="text" v-model="val">
<button type="button" @click="submitMsg">提交</button>
</div>
<ul>
<!-- <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li> -->
<todo-list v-for="(v, i) in list" :key="i" :v="v" :i="i" @delect_action="delect_action"></todo-list>
</ul>
</div>
<script type="text/javascript">
Vue.component("todo-list", {
template: "<li @click='delect_action'><span>第{{ i + 1 }}条: </span><span>{{ v }}</span></li>",
props: ['v', 'i'],
methods: {
delect_action () {
this.$emit("delect_action", this.i)
}
}
})
new Vue({
el: "#app",
data: {
val: "",
list: []
},
methods: {
submitMsg () {
// 往list中添加input框中的value
if (this.val) {
this.list.push(this.val);
this.val = ""
}
},
delect_action(index) {
this.list.splice(index, 1)
}
}
})
</script>