第3章 *组件交互 -父访问子-脚手架方式(2掌握)

作者: wqjcarnation | 来源:发表于2020-03-23 17:09 被阅读0次

相关工程:web-vue
参考：
https://blog.csdn.net/xqhys/article/details/89494155
https://blog.csdn.net/weixin_33813128/article/details/94177294
类似方法调用或属性访问

目标

父组件给子组件传参数props（子组件获取父组件数据主要用于传输数据单向）
通过 $refs获取子组件数据和调用子组件方法（主要用来调用子组件里的方法）
通过 $children 获取子组件数据和调用子组件方法(与$ refs类似不常用，了解)

data() 的data:区别

https://blog.csdn.net/admin123404/article/details/100535352

原因：不使用return包裹的数据会在项目的全局可见，会造成变量污染
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

第一种方式父组件给子组件传参数props

类似父类调用子类的构造方法,子类用props名字的数组，定义参数情况

setp 1开发子组件

<template>
  <div>
  <ul>
    <li>{{param1}}</li>
    <li>{{param2}}</li>
 </ul>
  </div>
</template>

<script>
export default{
  data(){
    return{

    }
  }，
  //public void test(param1,param2)类似java里的有参构造
  props:['param1','param2']
}
</script>

step2 开发父组件

<template>
  <div>
     <child param1="参数1" param2="参数2"></child>
  </div>
</template>

<script>
  import child from '@/components/props/child'
  export default {
    data() {
      return {
       
      };
    },
    components:{child}
  }
</script>

<style>

</style>

配置路由router/index.js

import props from '@/components/props/parent'

{
    path: '/props',
    name: 'props',
    component: props
}

测试

http://localhost:8080/#/props

动态prop（父组件给子组件传递的值来源于用户输入）

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

改造父组件

<template>
  <div>
    <input v-model="msg" />
    <!-- 第三步，在页面里加载子组件，并传参-->
    <child :param1='msg' param2='python'></child>
  </div>
</template>

<script>
  //第一步，引包
  import child from '@/components/props/child'
  export default{
    data(){
      return {
        msg:''

      }
    },
    //第二步，定义组件
    components:{child}
  }
</script>

<style>
</style>

测试

http://localhost:8080/#/props

动态绑定多个值，用多个v-bind
<child :param1="modelmsg" :param2="modelmsg2"></child>

给组件传一组值-传json对象

子组件

<template>
  <div>
    <h2>新闻信息</h2>
  <ul>
    <li>{{news.id}}</li>
    <li>{{news.content}}</li>
  </ul>
  </div>
</template>

<script>
export default{
  data(){
    return{

    }
  },
  //public void test(News news)类似java里的有参构造
  props:['news']

}
</script>

父组件

<template>
  <div>

    <!-- 第三步，在页面里加载子组件，并传参-->
    <childjson :news='news'></childjson>
  </div>
</template>

<script>
  //第一步，引包
  import childjson from '@/components/props/childjson'
  export default{
    data(){
      return {
       news:{id:'123',content:'沈阳3月底复工'}

      }
    },
    //第二步，定义组件
    components:{childjson}
  }
</script>

路由index.js

    import  parentjson from '@/components/props/parentjson'

    {
    path: '/parentjson',
    name: 'parentjson',
    component: parentjson
    }

测试

http://localhost:8080/#/parentjson

以下这个做为作业：

有时我们给组件传参数不是传一个对象，而是多个对象，这时我们需要把值包装成数组，用以下方法

子组件

<template>
  <div>
    <!--子组件属性打印-->
  <li><span>{{ obj.id }}-{{ obj.text }}</span></li>
  </div>
</template>

<script>
  export default {
    data() {
      return {
      };
    },
    props: ['obj']
  }
</script>

父组件

<template>
  <div>
    <ol>
           <child v-for="item in items" v-bind:obj="item"></child>
    </ol>
  </div>
</template>

<script>
  import child from '@/components/props/childjson'
  export default {
    data() {
      return {
     items: [
           { id:'1001',text: 'Runoob' },
           { id:'1002',text: 'Google' },
           { id:'1003',text: 'Taobao' }
         ]
      };
    },
    components:{child}
  }
</script>

也可以这么写

<template>
  <div>
   <ul v-for="item in obj">
     <li>{{item.username}}</li>
     <li>{{item.password}}</li>
   </ul>
  </div>

</template>

<script>
  export default{
    data(){
       return{

       }
    },
    props:['obj']
  }

</script>


<template>
  <div>
    <child01  :obj="userArray"></child01>

  </div>

</template>

<script>
  import child01 from '@/components/ChildArray'


  export default{
    data(){
      return {
      userArray:[{username:'wang.qj',password:'123456',birthday:'1980-10-24'}]
      }
    },
    components:{
      child01
    }
  }

</script>

路由和测试学生自行完成

二、通过refs调用子组件里的属性和方法

与$children功能相同,不同点是给每个子组件命了个名字，通过名字而不是通过索引来访问。
他虽然也可以直接访问子组件的数据，但这不是他的强项，所以他主要用来调用子类的方法。

（ $ref 有时候组件过多的话，就很难记清各个组件的顺序与位置，可以给子组件一个身份ID，这些ID的子组件可以通过集合$ refs访问到）

image.png

接下来我们写两个子组件，并且在每个子组件里各定义一个方法

调用子组件的方法（重点）

子组件1

<template>
  <p>child01</p>
</template>

<script>
  export default {
    data() {
      return {

      };
    },
    methods:{
      say:function(){
        alert("hello  child01!");
      }
    }
  }
</script>

子组件2

<template>
  <p>child01</p>
</template>

<script>
  export default {
    data() {
      return {

      };
    },
    methods:{
      say:function(){
        alert("hello  child02!");
      }
    }
  }
</script>

父组件

       <template>
  <div>

 <button  @click="showMsg">调用子组件的方法</button>
                <!-- 用ref属性为子组件起了一个用于后期引用的别名-->
                <child01 ref="c1"></child01>
                <!-- 用ref属性为子组件起了一个用于后期引用的别名-->
                <child02 ref='c2'></child02>
  </div>
</template>

<script>
import child01 from '@/components/refs/child01'
  import child02 from '@/components/refs/child02'
  export default {
    data() {
      return {

      };
    },
    components:{child01,child02},
    methods:{
      showMsg:function(){
        this.$refs.c1.say();
        this.$refs.c2.say();
      }
    }
  }
</script>

路由和测试

       import  refparent from '@/components/refs/parent'

      {
    path: '/refparent',
    name: 'refparent',
    component: refparent
         }


http://localhost:8080/#/refparent

获取子组件的属性

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
            <script src="js/vue.min.js"></script>
        </head>
        <body>
            <div id="count">
                <button @click="showmsg">
                    显示两个组件的信息
                </button>
                <child1 ref='c1'></child1>
                <child2 ref='c2'></child2>
            </div>
            <template id="child1">
                <div>
                    {{ msg }}
                </div>
            </template>
            <template id="child2">
                <div>
                    {{ msg }}
                </div>
            </template>
            <script>
                Vue.component('child1', {
                    template: '#child1',
                    data() {
                        return {
                            msg: '这是子组件1的信息'
                        }
                    },
                    methods:{
                        say(){
                            alert("我是子组件1的say方法");
                        }
                    }
                })
                Vue.component('child2', {
                    template: '#child2',
                    data() {
                        return {
                            msg: '这是子组件2的信息'
                        }
                    }
                })
                new Vue({
                    el: '#count',
                    data: {

                    },
                    methods: {
                        showmsg() {
                            alert(this.$refs.c1.msg);
                            this.$refs.c1.say();
                            alert(this.$refs.c2.msg);
                        }
                    }
                })
            </script>
        </body>
    </html>

三、通过 $children 获取子组件数据或调用子组件方法（了解略）

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
            <script src="js/vue.min.js"></script>
        </head>
        <body>
        <div id="count">
            <button @click="showmsg">
                显示两个组件的信息
            </button>
            <child1></child1>
            <child2></child2>
        </div>
        <template id="child1">
                <div>
                    {{ msg }}
                </div>
        </template>
        <template id="child2">
                <div>
                    {{ msg }}
                </div>
        </template>

            <script>
                Vue.component('child1', {
                    template: '#child1',
                    data() {
                        return {
                            msg: '这是子组件1的信息'
                        }
                    },
                    methods:{
                        say(){
                            alert("我是子组件1的say方法");
                        }
                    }
                })
                Vue.component('child2', {
                    template: '#child2',
                    data() {
                        return {
                            msg: '这是子组件2的信息'
                        }
                    },
                    methods:{
                        say(){
                            alert("我是子组件2的say方法");
                        }
                    }
                })
                new Vue({
                    el: '#count',
                    data: {

                    },
                    methods: {
                        showmsg() {
                            for (var i = 0; i < this.$children.length; i++) {
                                alert(this.$children[i].msg);
                                this.$children[i].say();
                            }
                        }
                    }
                })
            </script>
        </body>
    </html>

第3章 *组件交互 -父访问子-脚手架方式(2掌握)

目标

data() 的data:区别

第一种方式父组件给子组件传参数props

step2 开发父组件

配置路由router/index.js

测试

动态prop（父组件给子组件传递的值来源于用户输入）

测试

给组件传一组值-传json对象

有时我们给组件传参数不是传一个对象，而是多个对象，这时我们需要把值包装成数组，用以下方法

也可以这么写

路由和测试学生自行完成

二、通过refs调用子组件里的属性和方法

调用子组件的方法（重点）

获取子组件的属性

三、通过 $children 获取子组件数据或调用子组件方法（了解略）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

第3章 *组件交互 -父访问子-脚手架方式(2掌握)

目标

data() 的data:区别

第一种方式 父组件给子组件传参数props

step2 开发父组件

配置路由router/index.js

测试

动态prop（父组件给子组件传递的值来源于用户输入）

测试

给组件传一组值-传json对象

有时我们给组件传参数不是传一个对象，而是多个对象，这时我们需要把值包装成数组，用以下方法

也可以这么写

路由和测试学生自行完成

二、 通过refs调用子组件里的属性和方法

调用子组件的方法（重点）

获取子组件的属性

三、 通过 $children 获取子组件数据或调用子组件方法（了解略）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

第一种方式父组件给子组件传参数props

二、通过refs调用子组件里的属性和方法

三、通过 $children 获取子组件数据或调用子组件方法（了解略）