首页 > 其他分享> 文章详细

vue组件通信

2022-03-26 16:00:23 阅读：119 来源： 互联网

标签：vue String 可以通信 num props 组件属性

父组件向子组件通信：将父组件的数据，方法传递给子组件

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: `
      <div>
            <h1>num: {{num}} parentMsg: {{parentMsg}}</h1>
      </div>
      
  `,
    created() {
        // $parent可以简介访问父组件中的数据
    }

})
new Vue({
    // 注册模板
    components: { Demo },
    // 绑定视图
    el:'#app',
    // 绑定数据
    data: {
        msg: 'hello msg'
    },
    methods: {
        clickParent() {
            console.log('parent method');
        }
    }
})

<!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>Document</title>
</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>

标签：vue,String,可以,通信,num,props,组件,属性
来源： https://www.cnblogs.com/sunzihui/p/16059105.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue组件通信

$parent