How VueJS components interact and verify through props-JS Tutorial-php.cn

How VueJS components interact and verify through props

不言

Release： 2018-06-30 17:32:02

Original

1672 people have browsed it

This article mainly introduces the interaction and verification between VueJS components through props. It has certain reference value. Interested friends can refer to it.

props is a custom property used by the parent component to pass data. The data of the parent component needs to be passed to the child component through props, and the child component needs to explicitly declare "prop" with the props option.

The parent component passes data to the child component through props

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
  <child message="hello world!">props传递给子组件</child>
</p>

<script>
// 
Vue.component(&#39;child&#39;, {
 // 声明 props
 props: [&#39;message&#39;],
 // 同样也可以在 vm 实例中像 “this.message” 这样使用
 template: &#39;<h1>{{ message }}</h1>&#39;
})
// 创建根实例
new Vue({
 el: &#39;#app&#39;
})
</script>
</body>
</html>

Copy after login

The effect is as shown:

Dynamic props build data transfer

Similar to using v-bind to bind HTML features to an expression, you can also use v-bind dynamically Bind the value of props to the parent component's data. Whenever the data of the parent component changes, the change will also be transmitted to the child component:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
  <p>
   <input v-model="parentMsg">
   <br>
   <child v-bind:message="parentMsg"></child>
  </p>
</p>

<script>
// 注册
Vue.component(&#39;child&#39;, {
 // 声明 props
 props: [&#39;message&#39;],
 // 同样也可以在 vm 实例中像 “this.message” 这样使用
 template: &#39;<span>{{ message }}</span>&#39;
})
// 创建根实例
new Vue({
 el: &#39;#app&#39;,
 data: {
  parentMsg: &#39;父组件内容&#39;
 }
})
</script>
</body>
</html>

Copy after login

The effect is as shown in the figure:

The v-bind directive passes the todo to each repeated component

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
  <ol>
  <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
   </ol>
</p>

<script>
Vue.component(&#39;todo-item&#39;, {
 props: [&#39;todo&#39;],
 template: &#39;<li>{{ todo.text }}</li>&#39;
})
new Vue({
 el: &#39;#app&#39;,
 data: {
  sites: [
   { text: &#39;Runoob&#39; },
   { text: &#39;Google&#39; },
   { text: &#39;Taobao&#39; }
  ]
 }
})
</script>
</body>
</html>

Copy after login

The effect is as follows:

Note: props are one-way binding: when the properties of the parent component change, they will be transmitted to the child component, but not the other way around. .

The component specifies validation requirements for props

When props is an object instead of a string array, it contains validation requirements:

Vue.component(&#39;example&#39;, {
 props: {
  // 基础类型检测 （`null` 意思是任何类型都可以）
  propA: Number,
  // 多种类型
  propB: [String, Number],
  // 必传且是字符串
  propC: {
   type: String,
   required: true
  },
  // 数字，有默认值
  propD: {
   type: Number,
   default: 100
  },
  // 数组／对象的默认值应当由一个工厂函数返回
  propE: {
   type: Object,
   default: function () {
    return { message: &#39;hello&#39; }
   }
  },
  // 自定义验证函数
  propF: {
   validator: function (value) {
    return value > 10
   }
  }
 }
})

Copy after login

type can be the following native constructor:

String
Number
Boolean
Function
Object
Array

#type can also be a custom constructor, detected using instanceof.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to encapsulating input components in Vue

Introduction to Vue component communication practices

Vue2.0 Multi-Tab Switching Component Encapsulation Introduction

The above is the detailed content of How VueJS components interact and verify through props. For more information, please follow other related articles on the PHP Chinese website!