Vue 父组件与子组件的传值

最新推荐文章于 2019-08-30 10:19:52 发布

weixin_30247781

最新推荐文章于 2019-08-30 10:19:52 发布

阅读量106

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wanguofeng/p/11264133.html

版权

<!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>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <!-- 父组件，可以在引用子组件的时候， 通过 属性绑定（v-bind:） 的形式, 
      把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
    <mycom1></mycom1>
    <com2 v-bind:data1='msg'></com2>
  </div>

  <template id="app1">
    <div>
      <h1>{{ msg1 }}</h1>
    </div>  
  </template>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    // 创建的第一种方式 使用 Vue.extend 来创建全局的Vue组件
    var com1 = Vue.extend({
      template: '#app1', // 通过 template 属性，指定了组件要展示的HTML结构
      data() {
        return {
          msg1: '这个是父组件的数据'
        }
      }
    })
    Vue.component('mycom1', com1)


    var vm = new Vue({
      el: '#app',
      data: {
        msg:'这个是实例data里面的数据'
      },
      methods: {},
      components: {
        // 结论：经过演示，发现，子组件中，默认无法访问到 父组件中的 data 上的数据 和 methods 中的方法
        com2: {
          data() { // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，
            // 比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；
            // data 上的数据，都是可读可写的；
            return {
              title: '这个是子组件的数据'
            }
          },
          template: '<h1 @click="change">这是子组件 --- {{ data1 }}<br>{{ title }}</h1>',
          // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
          // props 中的数据，都是只读的，无法重新赋值
          // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
          props: ['data1'], 
          directives: {},
          filters: {},
          components: {},
          methods: {
            change() {
              //点击把子组件的数据改为父组件的数据
              this.title = this.data1
            }
          }
        }
      }
    });
  </script>
</body>

</html>

转载于:https://www.cnblogs.com/wanguofeng/p/11264133.html

weixin_30247781

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 父组件与子组件的传值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
复制链接

扫一扫