vue.js 使用 .components api注册组件时 js 放哪里?

Vanghohs
  • 183

https://jsfiddle.net/mmx38qxw...
运行不通过

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
  <bb-son v-model="value"></bb-son>
</div>

script 放在 template 中运行错误

var Main = {
  components: {
    'bb-son': {
      template: `
        <input v-model="value" :style="style1">
        </input>
        <script>
          export default {
            props: {
              value: {
                required: false
              }
            },
            data () {
            },
            computed: {
              style1: function () {
                let result = 'width: 2em;'
                if (!this.value) {
                  result = result + ' color: #0066CC;'
                } else {
                  result = result + ' color: #EA0000;'
                }
                return result
              }
            }
          }
          </script>
      `,
      props: {
        value: {
        }
      },
      data () {
        return {}
      },
      mounted: function () {
        console.info('son mounted, name is,', this.value.name)
      },
      updated: function () {
        console.info('son updated, name is,', this.value.name)
      }
    }
  },
  data () {
    return {
      valuef: {
        name: 'valuef'
      }
    }
  },
  methods: {
    showConsole: function () {
      console.info('current father name is, ', this.father.name)
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
回复
阅读 2k
2 个回答

template里是不能写js的,template模板里只能是html

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏