vue组件通信 父向子通信
父组件向子组件通信：将父组件的数据，方法传递给子组件
1.在父组件模板中，为子组件元素传递数据 属性值默认时字符串，传递变量方法使用v-bind 命名规范字母小写-
2.子组件 props属性接收数据或方法
两种方式 属性值是 1.数组， 每一个成员代表一个接收的属性名称
或2.对象 k 接收的属性名称
v 可以是构造函数：Number String
可以是数组:每一个成员代表一种类型(定义多类型)
可以是对象
type表示类型的构造函数， required是否是必须的 default默认值属性值可以是数据，属性值还可以是方法，返回值就是默认的数据
validator校验方法接收属性时，为驼峰式命名
props接收数据与模型中数据一样，添加给实例化对象自身并设置特性，因此可以在脚本文件中使用也可以在模板中使用
$parent
子组件中还可以通过$parent属性访问父组件，因此就可以间接的获取父组件中的数据。
但是工作中，不建议这么使用，因为这种方式与父组件耦合并且无法校验数据，
import Vue from "vue"; Vue.config.productionTip = false; // 定义组件 let Demo = Vue.extends({ // 接收的数据尧驼峰式命名 // 1.可以是数组 // props: ['num', 'parentMethod'] // 2.可以是对象 props: { // v1可以是类型构造函数，2可以是数组，定义多种类型 // num:Number // num: [Number, String] // 3可以是对象 num: { type: String, required: true, // default可以是 // default:'1' // 可以是方法 default() { return '1' } }, // 接收数据 parentMsg: { type: String, // 检验方法 validator(val) { // console.log(222, this, arguments); return val.length >= 6; } } }, // 定义模板 template: ``, created() { // $parent可以简介访问父组件中的数据 } }) new Vue({ // 注册模板 components: { Demo }, // 绑定视图 el:'#app', // 绑定数据 data: { msg: 'hello msg' }, methods: { clickParent() { console.log('parent method'); } } })num: {{num}} parentMsg: {{parentMsg}}
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<button @click="clickParent">点我执行父组件方法button>
<input type="text" v-model="msg">
<h1>父组件:{{msg}}h1>
<hr>
<Demo num="100" :parent-method="clickParent">Demo>
div>
<script src="./dist/01.js">script>
body>
html>