vue组件3-父子组件props传参

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>父子组件传参-props</title></h

编号90015478

2840人浏览 · 2017-07-11 11:19:16

编号90015478 · 2017-07-11 11:19:16 发布

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子组件传参-props</title>
</head>
<script src="vue.js"></script>
<body>
<div id="app1">
<parent></parent>
</div>
<script>
Vue.component('child', {
  // 声明 props
  props: ['message'],
  template: '<span>{{ message }}</span>'
})

//父子组件props传参子组件中可以使用props:['myMessage'],在父组件引用子组件时,使用my-message ="xx"

Vue.component('parent',{
    template:'<div><child message="我是子元素"></child></div>'
})
new Vue({
    el:"#app1"
})
</script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^