前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

Vue组件

一、组件介绍

每一个组件都是一个vue实例
每个组件均具有自身的模板template，根组件的模板就是挂载点，根组件也可以显式书写模板，会替换掉挂载点
每个组件模板只能拥有一个根标签
子组件的数据具有作用域，以达到组件的复用

二、根组件

1、什么是根组件

通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)

2、模板template

由""包裹的html代码块，出现在组件的内部，赋值给组件的 $template 变量
根组件如果不书写自身模板，那么模板就采用挂载点,如果显式书写模块，就会替换挂载点,但根组件必须拥有挂载点

<body>
	<p>app之上</p>
	<div id="app">
		<h1>{{ msg }}</h1>
	</div>
	<p>app之下</p>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	// 每个组件组件均拥有模板,template
	var app = new Vue({
		// 根组件的模板就是挂载点
		el: "#app",
		data : {
			msg: "根组件"
		},
		template: "<div>显式模板</div>"
	})
	// app.$template   取值
</script>

三、局部组件

一个满足vue语法规则的对象就是一个组件
直接定义组件，用一个变量名来接收，就是创建一个局部组件
变量名就是局部组件的组件名， var 组件名 = {}
通过组件名可以使用该组件

**使用局部组件时，要先在根组件中注册 components:{} **

<div id="app">
    <local-tag></local-tag>
    <local-tag></local-tag>
</div>

<!-- 语法规则 -->
<!-- 有自身的模板template，有data/methods/computed/watch -->
<script>
    var localTag = {
        // data需要绑定方法，数据通过返回值进行处理，达到组件复用，数据的私有化
        data () {
            return {
                count: 0
            }
        },
        template: '<button @click="btnAction">局部{{ count }}</button>',
        methods: {
            btnAction () {
                this.count ++
            }
        }
    }
    new Vue({
        el: "#app",
        // 注册子组件，局部组件要在父组件中使用，必须要提前在父组件中注册
        components: {
            'local-tag': localTag   // 当key与value写法一样时，可以直接写 localTag
        }
    })
</script>

四、全局组件

用 Vue.component("组件名", {}) 来创建全局组件
全局组件附属于Vue实例，可以不需要注册就可以使用

使用全局组件，不用在父级组件中注册

<div id="app">
    <global-tag></global-tag>
    <global-tag></global-tag>
</div>
<script>
	Vue.component('global-tag', {
		data () {
			return {
				count: 0
			}
		},
		template: '<button @click="btnAction">全局{{ count }}</button>',
		methods: {
			btnAction () {
				this.count ++
			}
		}
	})
    new Vue({
        el: "#app"
    })
</script>

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

通过 **绑定属性 **的方式进行数据传递
1. 给在父组件中出现的子组件名定义标签的全局属性
2. 在全局属性的值赋给父组件的数据变量
3. 在子组件内部，通过props拿到标签中的全局属性名
4. 在模板中直接用属性名来访问数据，在方法中通过 this.属性名 来访问数据

<div id="app">
    <global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag>
</div>
<script type="text/javascript">
	Vue.component('global-tag', {
        // 子组件中通过props拿到标签中的全局属性名
		props:['sup_data1', 'supdata2'],
        // 通过属性名取得父组件中的数据
		template: '<div @click="divClick">{{ sup_data1 }} {{ supdata2 }}</div>',
        methods:{
            divClick(){
                console.log(this.sup_data1)
            }
        }
	})
	new Vue({
		el: '#app',
		data: {
			sup_data1: '数据1',
			sup_data2: '数据2'
		}
	})
// 1.数据由父级提供
// 2.在父级模板(挂载点)中出现的子组件名(local-tag)上，为其设置全局属性,属性值就是父级提供的数据变量
// 3.在子组件中，提供$props来拿到自身的全局属性名(用''括起来的数组)
// 4.在模板中直接用属性名来访问数据，在方法中通过this.属性名来访问数据
// 5.名字出现多个单词的时候，使用_连接语法进行处理，以达到命名的统一
</script>

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

通过 发送事件请求 的方式进行数据传递
数据由子组件提供，父组件通过事件的回调方法获取数据
发送数据的关键: $emit("事件名", ...args)

<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)
			}
		}
	})
// 1.数据由子级提供
// 2.在子级中通过某个事件对外(this.$emit("事件名", ...args))发送一个事件
// 3.在父级的模板中，子组件名上，为发送的事件绑定一个回调方法,该回调方法由父级来完成实现体
// 4.在实现体中就可以拿到回调参数
</script>

七、父子组件实现todoList

<div id="app">
    <div>
        <input type="text" v-model='value'>
        <button @click='click'>提交</button>
    </div>
    <ul>
        <item
              v-for='(e, i) in list'
              :key='i'
              :ele='e'
              :index='i'
              @delete='deleteAction'
              ></item>
    </ul>
</div>
<script type="text/javascript">
	Vue.component('item', {
		props: ['ele', 'index'],
		template: '<li @click="item_click">{{ ele }}</li>',
		methods: {
			item_click: function () {
				this.$emit('delete', this.index)
			}
		}
	})
	new Vue({
		el: '#app',
		data: {
			value: '',
			list: [],
		},
		methods: {
			click: function () {
				this.list.push(this.value)
				this.value = ''
			},
			deleteAction: function (index) {
				this.list.splice(index, 1)
			}
		}
	})
</script>

posted on 2018-10-30 15:40 凉城旧巷阅读(636) 评论(0) 编辑收藏举报