VueJS コンポーネントが props を通じてどのように対話し、検証するか-jsチュートリアル-php.cn

VueJS コンポーネントが props を通じてどのように対話し、検証するか

不言

リリース： 2018-06-30 17:32:02

オリジナル

1633 人が閲覧しました

この記事では主に props を介した VueJS コンポーネント間の相互作用と検証について紹介します。興味のある方は参考にしてください。

props は、データを渡すために親コンポーネントによって使用されるカスタムプロパティです。親コンポーネントのデータは props を通じて子コンポーネントに渡す必要があり、子コンポーネントは props オプションを使用して "prop" を明示的に宣言する必要があります。

親コンポーネントは 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>

ログイン後にコピー

その効果は図に示すとおりです:

データ転送を構築するための動的 props

使用と同様v-bind による HTML 機能のバインド v-bind を使用して、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">
  <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>

ログイン後にコピー

結果は図に示すとおりです:

v-bind 命令が渡されます。繰り返される各コンポーネントへの todo

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>

ログイン後にコピー

では、効果は次のとおりです:

注: 小道具は一方向のバインディングです: 親コンポーネントのプロパティが変更されると、それらは送信されます子コンポーネントに接続しますが、その逆はできません。

コンポーネントは props の検証要件を指定します

props が文字列配列ではなくオブジェクトである場合、検証要件が含まれます:

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
   }
  }
 }
})

ログイン後にコピー

type は次のネイティブコンストラクターにすることができます: