VueJs组件之父子通讯的方式(2)

日期：2020-05-11 栏目：程序人生浏览：次

如果我们childNode中的myMessage改成{{my-message}}看运行结果：

2.动态props

在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件

 var childNode = {
  template: '<div>{{myMessage}}</div>',
  props: ['my-message']
    }

 var parentNode = {
  template: `
 <div class="parent">
 <child :my-message="data1"></child>
 <child :my-message="data2"></child>
 </div>`,
  components: {
   'child': childNode
  },
  data() {
   return {
    'data1': '111',
    'data2': '222'
   }
  }
 };

3、传递数字

初学者常犯的一个错误是使用字面量语法传递数值

<script src="https://unpkg.com/vue"></script>
<div id="example">
 <parent></parent>
</div>
<script>
 var childNode = {
  template: '<div>{{myMessage}}的类型是{{type}}</div>',
  props: ['myMessage'],
  computed: {
   type() {
    return typeof this.myMessage
   }
  }
 }
 var parentNode = {
  template: `
 <div class="parent">
 <my-child my-message="1"></my-child>
 </div>`,
  components: {
   'myChild': childNode
  }
 };
 // 创建根实例
 new Vue({
  el: '#example',
  components: {
   'parent': parentNode
  }
 })
</script>

结果：

因为它是一个字面 prop，它的值是字符串 "1" 而不是 number。如果想传递一个实际的 number，需要使用 v-bind，从而让它的值被当作JS表达式计算

如何把String转成number呢，其实只要改一个地方。

 var parentNode = {
  template: `
 <div class="parent">
 //只要把父组件my-message="1"改成:my-message="1"结果就变成number类型
 <my-child :my-message="1"></my-child>
 </div>`,
 };

当然你如果想通过v-bind想传一个string类型，那该怎么做呢？

我们可以使用动态props，在data属性中设置对应的数字1

var parentNode = {
 template: `
 <div class="parent">
 <my-child :my-message="data"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 },
 //这里'data': 1代表就是number类型，'data': "1"那就代表String类型
 data(){
 return {
  'data': 1
 }
 }
};

三、子转父：$emit

VueJs组件之父子通讯的方式(2)

相关推荐