DAY67-前端入门-javascript（十三） vue03

Vue组件

一、组件介绍

• 组件都具有模板,template
• new Vue()创建的是根组件
• 组件与实例一一对应,创建一个实例就是创建了一个组件,同理创建一个组件就相当于创建了一个实例
• 根组件如果不书写自身模板,那么模板就采用挂载点,如果显式书写模块,就会替换挂载点,但根组件必须拥有挂载点
• 子组件都具有自身模板,根组件是所有子组件的父级(一级父级....n级父级)

二、局部组件

<div id="app">
    <!-- 连接语法：提倡用 - 链接 -->
    <local-tag></local-tag>
    <local-tag></local-tag>
</div>
<script>
    //一个满足VUE语法规则的对象就是一个组件
    var localTag = {
        data () {
            return {
                count: 0
            }
        },
        template: '<button @click="btnAction">局部{{ count }}</button>',
        methods: {
            btnAction () {
                this.count ++
            }
        }
    }
    new Vue({
        el: "#app",
        components: {
            // 在根组件中注册子组件
            'local-tag': localTag
        }
    })
</script>

三、全局组件

<div id="app">
    <global-tag></global-tag>
    <global-tag></global-tag>
</div>
<script>
    // 用Vue.component("组件名", {})来创建全局组件
    // 全局组件附属于Vue实例,可以不需要注册就可以使用
	Vue.component('global-tag', {
		data () {
			return {
				count: 0
			}
		},
		template: '<button @click="btnAction">全局{{ count }}</button>',
		methods: {
			btnAction () {
				this.count ++
			}
		}
	})
    new Vue({
        el: "#app"
    })
</script>

四、父组件传递数据给子组件

• 通过绑定属性的方式进行数据传递

<div id="app">
    <global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag>
</div>
<script type="text/javascript">
    // 1.给在父组件中出现的子组件名定义标签的全局属性
    // 2.在父组件中给全局属性赋予子组件需要的数据
    // 3.在子组件内部,通过props拿到标签中的全局属性名
	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">
    // 1.数据由子级提供
    // 2.在子级中通过某个事件对外(this.$emit("事件名", ...args))发送一个事件
    // 3.在父级的模板中,子组件名上,为发送的事件绑定一个回调方法,该回调方法由父级来完成实现体
    // 4.在实现体中就可以拿到回调参数
	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>
        <todo-list v-for="(v, i) in list" :key="i" :v="v" :i="i" @delect_action1="delect_action2"></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_action1", 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_action2(index) {
				this.list.splice(index, 1)
			}
		}
	})
</script>