组件传值

最新推荐文章于 2023-11-18 12:38:53 发布

学习没有捷径，如果有那便是持之以恒

最新推荐文章于 2023-11-18 12:38:53 发布

阅读量126

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/wulianlang6162/article/details/99413765

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

父组件向子组件传值

格式：

子组件用父组件的数据，用props数组来接收，是一个数组,名称对应接收，并且是只读的

new Vue({
             //下面是父作用域
             el:'#app',
             data: {
                 //定义父组件数据
            meg:'123父组件的数据'
             },
             components: {
                 //下面是子作用域
                
                data () {
            //定义子组件的数据，子组件内部私用数据,data中的数据可读可写
                    return {
                        title:'123',
                    content:'qq'
                    }
                },
                 //子组件用父组件的数据，用props来接收，是一个数组,名称对应接收，并且是只读的
                 coml:{
                     props: ['parentmsg'],
                     template:'<h1>这是子组件===={{parentmsg}}</h1>'
                 }
             }
         });

控制区域

 <div id="app">
        <!-- 父组件可以在引用 子组件的时候，通过属性绑定的形式，把
        需要传递给子组件的数据，供子组件使用
        -->
         <coml :parentmsg="meg"></coml>
     </div>

子组件向父组件传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
         <!--//导入js包-->
         <script src="js/vue.js"></script>
         <!-- Bootstrap -->
         <link href="./bootstrap/dist/css/bootstrap.css" rel="stylesheet">
         <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
         <link href="./css/Animate.css" rel="stylesheet">
</head>
<body>
    <div id="app">

         <com2 @fun="show"></com2>
     </div>
     <template id="tmpl">
         <div>
         <h1>这是子组件</h1>
<input type="button" value="调用父组件方法" @click="myclick">
         </div>
     </template>
     <script type="text/javascript">
var com2={
    template:'#tmpl',
    //子组件的方法
    methods: {
        myclick(){
        //用emit触发，调用父组件的方法
        this.$emit('fun',789)
    }
    }
  
}


         new Vue({
             //下面是父作用域
             el:'#app',
             data: {
                 //定义父组件数据
            meg:'123父组件的数据'
             },methods: {
                 show(data){
                    console.log("这是父组件方法"+data);
                    
                     
                 }
             },
             components: {
                com2:com2
             }
         });
     </script>
</body>
</html>

学习没有捷径，如果有那便是持之以恒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
组件传值

父组件向子组件传值格式：子组件用父组件的数据，用props数组来接收，是一个数组,名称对应接收，并且是只读的new Vue({ //下面是父作用域 el:'#app', data: { //定义父组件数据 meg:'123父组件的数据' ...
复制链接

扫一扫