Vue-组件化，父组件传子组件常见传值方式

前言

我们都知道vue核心之一：组件化，vue中万物皆组件，组件化我认为应该来至于模块化的设计思想，比如在模块化开发中，一个模块就是一个实现特定功能的独立的文件，有了模块我们就更方便去阅读代码，更方便使用别人的代码，同时自己的代码页更加易于维护，还有就是比如常用到的懒加载似乎也有模块化的感觉。前端组件化应该就是模块化的表现，vue中万物皆组件，页面上每个组件相互独立、可视化、可交互化，组件之间又可以相互组合，总之，组件化我的感觉就是一个页面对应一个容器，页面顶部有导航，有轮播图，侧边有侧边栏，中间有正文内容区域，底部也有独立的组件，不同的页面又根据内容需要，盛放相关的组件。要想让容器呈现不同效果，就需要组件之间相互交互通信。（父传子和子传父）

你可能不太懂什么是父组件，什么是子组件，更别说之间的通信了，因为我学习的时候就不太了解怎么区分，只是死记了下来，这里我说下我的理解，我们将一段代码封装成一个组件，而这个组件又在另一个容器中使用，那么使用这个组件的容器就叫父容器，成为了父组件，我们封装的代码就叫子组件。必须我们在使用某ui组件库的时候，我们使用的地方叫父组件，我们传递的值给了子组件，根据ui库提供的绑定方法其实就是子组件传递给我们使用的父组件。下面介绍一下常见的传值方式，都省略了组件注册的部分代码，实际开发中会将组件写在单独的文件中，只需要在容器中引入并使用。

父传子

总体来说就是父组件在引用的子组件中定义一个传值的属性，子组件通过props接收到父组件传来的值，同时子组件使用传来的值，

普通的父传子

<div id="app">
        <subtag msg="hello"></subtag>
</div>
<script>
     Vue.component('subtag', {
            props: ['msg'],
            template: '<span>{{msg}}</span>'
        })
        new Vue({
            el: "#app"
        })
</script>

上面的代码，div为父组件，使用了subtag子组件，通过msg属性把值hello传递给子组件，子组件通过props接收到传递的值，并把值渲染到自己的template中。

动态绑定props传递参数

<div id="app">
        <input type="text" v-model='par'>
        <child :message='par'></child>
</div>
<script>
    Vue.component('child', {
            props: ['message'],
            template: '<span>{{ message }}</span>'
        })
        new Vue({
            el: '#app',
            data: {
                par: ""
            }
        })
</script>

上面的代码。div使用了子组件child,inut双向绑定在par变量，然后将par变量通过message传递给子组件，子组件通过props收到message后，并将值渲染到自己的template中。

需要注意的是，prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

父向子传递一个数组并遍历。

<div id="app">
        <ol>
            <todo-item v-for="item in sites" v-bind:todo="item">
            </todo-item>
        </ol>
</div>
<script>
     Vue.component('todo-item', {
            props: ['todo'],
            template: '<li>{{ todo.text }}</li>'
        })
        new Vue({
            el: '#app',
            data: {
                sites: [
                    { text: 'Runoob' },
                    { text: 'Google' },
                    { text: 'Taobao' }
                ]
            }
        })
</script>

上面的代码先遍历后传值，把遍历的每一项传给子组件，出现了这样的效果。

时间太晚了。。。。下期介绍我对子传父的理解。