vue——Props属性和Data属性概述

利用Props可以进行组件之间数据传递(类似于React的Props)。

Props

  • 父组件向子组件传递数据
  • 动态props
  • 子组件向父组件传递了数据
  • 子组件向子组件传递数据
  • Data
  • 使用data
  • data选项/数据
  • computed
  • 声明式渲染


父组件向子组件传递数据

每一个组件都有作用域的限制,所以不可以在子组件内直接使用父组件的数据。

若要让子组件使用上父组件的数据,则必须通过子组件的Props选项。

静态Props

子组件要显式的使用props选项声明其所期待的数据:

在父组件之中,把数据传入:

<child message="hello">child>

从而在子组件中,声明props来接受传入的数据:

Vue.component('child', {
	//声明了props
	props: ['message'],
	//就像data一样,prop也可以在模板之内使用
	//同样也可以在vm实例中类似“this.message“这样使用
	template: '<span>{{message}}span>'
}
)

注意:在声明props和插入节点的时候,利用驼峰命名,在HTML中使用-进行连接。

  • props可以是数组或者对象,用来接受父组件传递的数据。
  • props可以是简单地数组。
  • props可以利用对象进行替代,对象允许配置高级选项,例如类型监测、自定义校验和设置默认的数值。

动态props

在父组件中,把数据通过v-bind:msg传入给子组件。

<template>
	<div id="post">
		<post-body :msg="msg">post-body>
	div>
template>
<script>
import PostBody from './PostBody'
export default {
	name: 'post',
	data: () => ({
		msg: '哈哈'
	}),
	components: { PostBody }
}
script>

在props中添加了元素之后,就不用再data中继续添加变量了,在子组件中,如何拿到传入的数据?
首先声明props,把得到的数据赋值给props,就可以直接渲染了。

<template>
	<div class="post-body">
		{{ msg }}
		//渲染到页面上
	div>
 template>
 <script>
 export default {
 	name: 'post-body',
 	props: ['msg']
 	// 声明 props
}
script>

子组件向父组件传递了数据

子组件主要是通过事件传递数据给父组件。

子组件:
首先声明了一个方法setnum,然后使用$emit来遍历父组件传递过来的addnum事件,并且返回了字符串的数量:

<script>
 export default {
 	name: 'post-body',
 	methods: {
 		setnum: function () {
 			this.$emit('addnum', '数量:')
 		}
 	}
 }
 script>

当按钮被点击的时候,会触发v-on:click事件,调用绑定的setnum方法,并且把数据传递给父组件。

 <template>
 	<div class="post-body">
 		<input type='button' value='+1' @click='setnum'/>
 	div>
 template>

父组件
在负组件中,利用addnum事件调用getnum方法,从而获取到子组件传递过来的参数string。

 <template>
 	<div id="post">
 		<p>{{ str }}{{ num }}p>
 		<post-body @addnum='getnum'>post-body>
 	div>
 template>

getnum 方法中的参数 str 就是从子组件传递过来的参数 string。

<script>
import PostBody from './PostBody
export default {
	name: 'post',
	data: () => ({
		num: 0,
		str:
	}),
	methods: {
		getnum: function (str) {
			this.str = str
			this.num ++
		}
	},
	components: { PostBody }
script>

这样点击子组件的+1按钮,就可以做到父组件的显示的数值改变,并且完成 +1 的操作。


子组件向子组件传递数据

Vue没有直接向子对子传参的方法,建议把需要传递数据的子组件,合并成为一个组件,若一定需要子对子传参,则可以先传到父组件,传到子组件。

为了便于开发,Vue推出了一个状态管理的工具,乘坐Vuex,可以方便实现组件之间的参数传递。


Data

每一个Vue实例都会带起其data对象里的所有属性,相当于React的State。

data
注意:data必须是函数,这里的data只是一个特殊的原始属性。

var data = { a: 1 }
var vm = new Vue({
	data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
data.a = 3
vm.a // -> 3

注意只有这些被代理的属性是响应的,也就是说值的任何改变都是触发视图的重新渲染。如果在实例创 建之后添加新的属性到实例上,它不会触发视图更新。我们将在后面详细讨论响应系统。

除了data属性,Vue实例也暴露了一些有用的实例属性和方法,这些属性和方法都有前缀$,用来和代理的data属性做区分,例如:

var data = { a: 1 }Properties and Methods
var vm = new Vue({
	el: '#example',
	data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
	// 这个回调将在 `vm.a` 改变后调用
})

注意:不要在实例属性或者回调函数中使用箭头函数,因为箭头函数绑定父级上下文,所以this不会和预想的一样指向该vue实例

vm.$watch('a', newVal => this.myMethod())
// this.myMethod 会是一个 undefined

使用data

data 数据写在 vue 实例里面,类型是一个 Function

<script>
	export default {
		name: 'comment-box',
		data: () => ({
			comments: [
				{ text: 'hello git' },
				{ text: 'hello vuejs' }
			]
		})
	}
script>

data选项/数据

data:

  • 类型:Object && Function
  • 限制:组件的定义只能够接受function
  • 详细
    • Vue实例的数据对象data已经使用了很多,数据绑定离不开data里面的数据,这也是vue的核心属性。
    • 这是Vue绑定数据到HTML标签的数据源泉,另外Vue框架会自动监视data里面的数据变化,自动更新数据到HTML标签上。

注意:因为箭头函数绑定了父级作用域的上下文,所以this指向不会指向到该Vue实例。

data: () => { return { a: this.myProp }}
// this.myProp 将会是 undefined

computed

把需要运算的data数据放在computed中,然后进行渲染。

  • 类型{ [key: string]: Function | { get: Function, set: Function } }
  • 详细: 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地 绑定为 Vue 实例
export default {
	name: 'comment-box',
	data: () => ({
		comments: [
			{ text: 'hello git' },
			{ text: 'hello vuejs' }
		]
	}),
	computed: {
		reversedMessage: function () {
			return this.comments.slice().reverse()
		}
	}
}

计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果实例范畴之外的依赖 (比如非响应式的 not reactive) 是不会触发计算属性更新的。


声明式渲染

vue的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM。

数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值:

<template>
	<div class="comment-box">
		{{ comment.text }}
	div>
template>

Mustache 标签将会被替代为对应数据对象上 comment.text 属性的值。无论何时,绑定的数据对 象上 comment.text 属性发生了改变,插值处的内容都会更新


你可能感兴趣的:(Vue,JavaScript,前端HTMLCss,vue.js,javascript,前端)